ArkUI组件-其他布局容器组件

百得知识库

新星创作者: 操作系统技术领域

2025-02-25 15:36:08

课时名称	课时知识点
ArkUI组件-其他布局容器组件	ArkUI组件-其他布局容器组件，学习笔记文档地址： https://www.yuque.com/wudl/harmonyos/yz1gkg0y9bug51yx?singleDoc# 《鸿蒙应用开发-基础》

...全文

1182 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

在 HarmonyOS 应用开发中，优秀的界面布局是用户体验的基础。ArkUI 作为新一代声明式 UI 开发框架，提供了丰富多样的布局组件和容器组件，帮助开发者高效构建复杂界面。本文将系统性地介绍 ArkUI 的核心布局方式，包括线性布局、层叠布局、弹性布局等基础布局，以及列表、轮播、选项卡等高级容器组件。Swiper() {.aspectRatio(2) //宽高比为2Indicator.dot()// 小圆点.itemWidth(20)// 默认的宽.itemHeight(20)//默认的高。

(value?: { space?value：可选参数，space表示设置Row的子组件在水平方向上的间距，简单样例如下所示：Row() {Text().width(90)Text() // 模拟子组件之间的间隔为20.width(20)Text().width(20)Row({space: 20}) { // 设置子组件之间的间隔为20Text().width(90)Text().width(20)alignItems：参数类型为，表示子组件在竖直方向上的布局方式，Top。

(value?：设置子组件的对其方式，AlignmentTopStart：子组件在Stack内靠左上角对齐，简单样例如下所示：Text('Text3') // 被遮挡住了.width(60)Top：设置子组件在Stack内靠顶部水平居中对齐，简单样例如下所示：Text('Text3') // 被遮挡住了.width(60)TopEnd：设置子组件在Stack内部靠右上角对齐，简单样例如下所示：Text('Text3') // 被遮挡住了.width(60)Start：子组件靠Stack。

线性布局是开发中最常用的布局，通过线性容器Row和Column构建。其子元素在线性方向上（水平方向和垂直方向）依次排列。Column：容器内子元素按照垂直方向排列。Row：容器内子元素按照水平方向排列。线性布局在布局方向上的轴线称为主轴，Column主轴为垂直方向，Row主轴为水平方向。垂直于主轴方向的轴线称为交叉轴，Column交叉轴为水平方向，Row交叉轴为垂直方向。

本文介绍了ArkUI布局容器组件的使用方式。主要包括：1）Flex弹性布局的基本语法和方向设置；2）绝对定位的position属性实现组件层叠效果；3）zIndex调整组件层级；4）padding内边距和margin外边距的设置方法；5）List列表组件的特性和用法；6）Scroll滚动容器的属性和滚动条配置。这些组件提供了灵活的布局方式，支持横向/纵向排列、间距调整、定位控制等功能，适用于构建复杂的界面布局。

安徽百得思维社区

2

社区成员

138

社区内容

发帖

与我相关

我的任务

harmonyos华为个人社区安徽省·合肥市

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章