尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
鸿蒙ArkUI零基础入门:布局
ArkUI 五大基础布局布局是页面的容器用来控制页面内所有组件的排列方式所有页面有且只能有一个根布局根布局内部可以无限嵌套其他布局这是ArkUI开发硬性规范多根布局会直接编译报错。下面分别讲解5种布局的特点、适用场景和极简示例代码1. 垂直布局 Column最常用核心作用内部所有组件默认从上至下垂直单列排列常用对齐属性justifyContent主轴对齐上下居中/置顶/置底、alignItems交叉轴对齐左对齐/居中/右对齐适用场景表单页面、个人中心、首页信息流、所有从上往下排布的页面优缺点代码极简、上手零难度是日常开发首选基础布局无法实现同行并排效果2. 水平布局 Row高频搭配布局核心作用内部所有组件默认从左至右水平单行排列组件不会自动换行常用对齐属性justifyContent水平对齐、alignItems垂直对齐适用场景输入框按钮组合、底部导航栏、标签栏、同行并排按钮、图文同行展示避坑点Row内部组件过多会溢出屏幕不会自动换行需要换行优先用Flex布局3. 相对布局 RelativeContainer精准定位布局核心作用脱离固定行列规则组件通过id互相绑定参照A组件相对于B组件的上下、左右、居中进行定位核心特点不需要计算固定坐标依托组件相对位置排版适用场景不规则异形页面、悬浮按钮、弹窗内部复杂排版、图片角落角标优缺点定位极其灵活适配性强但是代码量大、逻辑复杂常规列表、表单页面完全不推荐使用4. 层叠布局 Stack图层叠加布局核心作用所有组件默认居中叠加后声明的组件层级更高会覆盖在先声明的组件上方类似PS图层层级规则代码越靠后图层越在上层适用场景图片加文字水印、轮播图底部指示器、视频播放悬浮播放按钮、商品图右上角优惠角标一句话记忆组件叠罗汉后写盖前写5. 弹性布局 Flex万能自适应布局核心作用兼容Row和Column所有能力可自由切换水平/垂直排列支持组件自动换行、自动均分屏幕宽度、自适应不同尺寸手机屏幕核心属性flexDirection切换水平/垂直、wrap是否自动换行适用场景商品宫格布局、自动换行按钮组、多设备屏幕适配、复杂流式布局开发建议Row/Column满足不了换行、均分需求时直接用Flex实际项目中复杂布局首选Flex补充布局嵌套实战必学单一布局无法满足大部分页面需求日常开发布局嵌套是常态最经典组合根布局Column整体垂直排布 内部嵌套Row局部水平并排布局是页面的容器用来控制页面内所有组件的排列方式所有页面有且只能有一个根布局根布局内部可以无限嵌套其他布局这是ArkUI开发硬性规范多根布局会直接编译报错。下面分别讲解5种布局的特点、适用场景1. 垂直布局 Column排列规则内部组件从上到下垂直依次排列适用场景首页内容列表、表单页面、从上至下排布的常规页面一句话记忆竖着排默认从上往下挤2. 水平布局 Row排列规则内部组件从左到右水平依次排列适用场景底部导航栏、输入框按钮组合、同行并排按钮一句话记忆横着排默认从左往右挤3. 相对布局 RelativeContainer排列规则组件之间互相参照定位A组件相对于B组件的上下左右摆放适用场景复杂不规则页面、需要精准相对定位的弹窗、悬浮按钮优缺点定位灵活但是代码冗余简单页面不推荐使用4. 层叠布局 Stack排列规则组件层层叠加后写的组件覆盖在先写的组件上方适用场景图片加文字水印、轮播图指示器、视频播放悬浮按钮一句话记忆叠罗汉后面盖前面5. 弹性布局 Flex排列规则兼容水平垂直布局可自由设置换行、等分宽高、自动分配剩余空间适用场景自适应多宫格、屏幕适配页面、需要自动换行的按钮组开发推荐复杂自适应页面首选Flex替代Row/Column实现更灵活的适配
RELATED

相关推荐

Milvus架构与核心原理

Milvus架构与核心原理

Milvus架构与核心原理 文章目录Milvus架构与核心原理1 整体认识2 三种部署方式3 分清逻辑数据模型和物理处理模型3.1 Database3.2 Collection3.3 Schema3.4 Field3.5 Entity3.6 Partition3.7 Shard3.8 Segment3.8.1.1 Growing Segment3.8.1.2 Sealed Segment4 分布式 Milvus 的…

📅 2026/9/16 22:31:23
独立研究者开发的土耳其语“形态大脑“

独立研究者开发的土耳其语“形态大脑“

这项由独立研究者完成的研究以预印本形式发布于2026年6月17日,论文编号为arXiv:2606.18717,有兴趣深入了解的读者可以通过该编号在arXiv平台查询完整论文。土耳其语有一种神奇的"积木特性"。一个最基本的词根,可以通过不断往后面粘…

📅 2026/9/21 13:14:16
吉他选购指南2026年入门级1000-2000元横评:参数对比+真实评测

吉他选购指南2026年入门级1000-2000元横评:参数对比+真实评测

本文适合人群: 零基础 / 入门阶段 / 预算1000-2000元 / 想在买前做好功课的本文核心内容:新手选琴的核心决策维度(非参数对比,是真正有用的标准)2026年1000-2000元五款主流入门吉他横评(含参数对比表&#…

📅 2026/9/17 17:57:06
MORE NEWS

更多资讯

📰

OllyDbg调试器安装配置与实战技巧:从下载到断点调试

简介:Ollydbg 1.09汉化版调试工具包,面向汇编语言学习者、软件开发者和安全研究人员,用于程序动态调试与逆向分析。包体共13个文件,以exe主程序、dll插件、txt使用说明、ini配置和c示例源码为主,压缩后约676KB&#xf…

📰

Win11共享‘扩展错误’根因解析与SMB兼容性修复指南

1. 这个“扩展错误”不是报错,是Windows 11在悄悄关掉你的共享通道你刚在Windows 11里右键一个文件夹,点“属性→共享→高级共享”,勾上“共享此文件夹”,点击“确定”——弹窗却冷不丁跳出:“无法完成操作。出现了扩展…

📰

3年避坑经验:搞懂网站空间支持什么程序,拒绝建站报价被坑

3年避坑经验:搞懂网站空间支持什么程序,拒绝建站报价被坑 改个需求建站公司拖一周,问原因却只甩给你一句“服务器不兼容”或“环境配置太复杂”。这种憋屈感,相信不少创业团队负责人都体会过。明明只是加个按钮、改个页面结构,对方却以技术壁垒为由拖延…

📰

Agentic Workflow 编排原理与 Kubernetes 实践

我无法根据当前输入生成符合要求的博文。原因如下:项目标题仅为单个字母“ax”,无明确语义指向,无法确定其所属领域(是缩写?命令?工具名?项目代号?);项目正文…

📰

金融服务系统架构设计:账户、支付与对账实战

先交代一下背景。我手上这个financial-services项目,是这几年做过的后端系统里最折腾、也最值得复盘的一套。它不是一个具体业务,而是一组金融能力的集合,账户、支付、风控、对账、清结算全在里面。很多人一听“金融服务”就头大,…

📰

个人技术护城河构建(一):从点状技能到网状知识图谱的体系化搭建

个人技术护城河构建(一):从点状技能到网状知识图谱的体系化搭建很多工程师在职业生涯的前几年,习惯于“遇到问题搜一搜、看完文档敲敲代码”的点状技能积累方式。这种模式在技术更新缓慢的时期尚可维持,但在大模型能够…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬