【HarmonyOS NEXT】 ArkUI常用布局及组件库介绍

目录

常用布局

线性布局（Row/Column）

层叠布局（Stack）

弹性布局（Flex）

相对布局（RelativeContainer）

栅格布局（GridRow/GridCol）

列表（List）

创建网格（Grid/GridItem）

轮播（Swiper）

常用组件

按钮（Button）

单选框（Radio）

切换按钮（Toggle）

进度条（Progress）

文本组件（Text/Span）

文本输入（TextInput/TextArea）

自定义弹窗（CustomDialog）

图片（Image）

Web组件

常用布局

官方文档：​​文档中心​​

线性布局（Row/Column）

控制其子元素在线性方向上（水平方向和垂直方向）依次排列

层叠布局（Stack）

层叠布局通过​​Stack​​容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置

弹性布局（Flex）

弹性布局提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间

相对布局（RelativeContainer）

​​RelativeContainer​​为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局

栅格布局（GridRow/GridCol）

是一种通用的辅助定位工具，通常用于不同尺寸设备的自动换行和自适应的效果

列表（List）

当列表项达到一定数量，内容超过屏幕大小时，可以自动提供滚动功能

创建网格（Grid/GridItem）

具有较强的页面均分能力，子组件占比控制能力

轮播（Swiper）

Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示

常用组件

官方文档：​​文档中心​​

按钮（Button）

其类型包括胶囊按钮、圆形按钮、普通按钮

单选框（Radio）

切换按钮（Toggle）

提供勾选效果以及开关效果，可根据设置的类型进行控制

进度条（Progress）

可通过类型设置条状，环状，月牙状

文本组件（Text/Span）

文本输入（TextInput/TextArea）

TextArea用于多行文本输入

自定义弹窗（CustomDialog）

可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗

图片（Image）

可设置图片缩放类型、重复样式、渲染模式、解码尺寸、设置滤镜等操作

Web组件

Web组件用于在应用程序中显示本地或网络Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力