ArkUI-容器组件
1 ROW组件
沿水平方向布局容器。可以包含子组件。
Row(value?:{space?:string | number})
参数：
|-------|------------------|----|-----|----------|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| space | string | number | 否 | 0 | 横向布局元素间距 |
属性：
|----------------|---------------|----------------------|-------------------|
| 名称 | 参数类型 | 默认值 | 描述 |
| alignItems | VerticalAlign | VerticalAlign.Center | 在垂直方向上子组件的对齐格式， |
| justifycontent | FlexAlign | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 |
示例：
//@Entry装饰器 入口组件
@Entry
//@Component装饰器 自定义组件（一个一个独立的模块）
@Component
struct Index { //自定义组件 Index组件的名称
@State title: string = "你好！";
build(){
//build中的row组件只能写一个，多个写在row内部
// {space:10} 子组件的间距
Row({space:10}){
//添加其他组件
// Button('1')
// Button('2')
// Button('3')
// 嵌套Row()
Row()
.width('30%')
.height(50)
.backgroundColor('red')
Row()
.width('30%')
.height(50)
.backgroundColor('green')
Row()
.width('30%')
.height(50)
.backgroundColor('blue')
}
.width('100%')
.height(200)
.border({width:2})
.alignItems(VerticalAlign.Top)
//垂直方向的对齐格式VerticalAlign.top /VerticalAlign.center /VerticalAlign.bottom
.justifyContent(FlexAlign.SpaceEvenly)
//水平方向的对齐方式
// FlexAlign.Start FlexAlign.center FlexAlign.End 左中右
//FlexAlign.SpaceBetween 两端对齐
//FlexAlign.SpaceAround 左右间距相同
//FlexAlign.SpaceEvenly 间隔相同
}
}
2 Column组件
沿垂直方向布局的容器。可以包含子组件。
Column(value?:{space?:string | number})
参数：
|-------|------------------|----|-----|----------|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| space | string | number | 否 | 0 | 纵向布局元素间距 |
属性：
|------------------|-----------------|----------------------|------------------|
| 名称 | 参数类型 | 默认值 | 描述 |
| alignltems | HorizontalAlign | VerticalAlign.Center | 设置子组件在水平方向上的对齐格式 |
| justifyContent8+ | FlexAlign | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式 |
示例：
@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
@State title: string = "hello world";
//UI描述
build(){
Column({space:10}){//space:10 设置子组件的间距
//添加子组件
Button('click1')
Button('click2')
Button('click3')
}
.width('100%')
.height(200)
.border({width:2})
// 添加对齐方式（水平方向对齐）
// 左对齐
.alignItems(HorizontalAlign.Start)
// 居中对齐（默认值）
// .alignItems(HorizontalAlign.Center)
// 右对齐
// .alignItems(HorizontalAlign.End)
//添加对齐方式-垂直方向对齐
// 上对齐
.justifyContent(FlexAlign.Start)
// 居中对齐
.justifyContent(FlexAlign.Center)
// 下对齐
.justifyContent(FlexAlign.End)
// 两端对齐
.justifyContent(FlexAlign.SpaceBetween)
// 元素左右外边距相等
.justifyContent(FlexAlign.SpaceAround)
// 元素所有间距相同
.justifyContent(FlexAlign.SpaceEvenly)
}
}
3 Flex组件
以弹性方式布局子组件的容器组件。
子组件 可以包含子组件。
接口
Flex(value?:{ direction?: FlexDirection, wrap?: Flexwrap, justifycontent?.FlexAlign,alignItems?: ItemAlign,aligncontent?: FlexAlign })
参数：
|----------------|---------------|----|-------------------|-------------------------------------------------|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| direction | FlexDirection | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
| wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行列排列。 |
| justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
| alignltems | ItemAlign | 否 | ltemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
| alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效 |
3.1 direction
设置子组件在flex容器中的排列方式
语法：
Flex({direction:FlexDirection.属性值}){
}
属性值：
Row：水平方向排列
Column：垂直方向排列
RowReverse：水平方向逆向排列
ColumnReverse：垂直方向逆向排列
示例：
@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
@State title: string = "hello world";
//UI描述
build(){
Column({space:10}) {
//子组件在Flex容器上排列的方向，即主轴的方向
// direction
// direction:FlexDirection.Row 横向排列
// direction:FlexDirection.Column 纵向排列
Flex({direction:FlexDirection.Row}){
Text('1')
.width('20%')
.height(50)
.backgroundColor('red')
Text('2')
.width('20%')
.height(50)
.backgroundColor(0x904523)
Text('3')
.width('20%')
.height(50)
.backgroundColor('green')
Text('4')
.width('20%')
.height(50)
.backgroundColor(0x123458)
}
.width('90%')
.height(100)
// 单词
.backgroundColor('red')
// #16进制
.backgroundColor('#F00')
// 0X + 16进制
.backgroundColor(0X0F0)
}
.width('100%')
.margin({top:10})
}
}
3.2 wrap
设置子组件在flex容器中的排列方式
语法：
Flex({wrap:FlexWrap.属性值}){
}
属性值：
Warp：换行
NoWarp:不换行
WrapReverse 换行逆向
示例：
@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
@State title: string = "hello world";
//UI描述
build(){
Column({space:10}) {
// warp 设置flex容器单行/多行排列
// wrap:FlexWrap.Wrap 换行
//wrap:FlexWrap.NoWrap 不换行
// wrap:FlexWrap.WrapReverse 换行逆向
Flex({wrap:FlexWrap.WrapReverse}){
Text('1')
.width('50%')
.height(50)
.backgroundColor('red')
Text('2')
.width('20%')
.height(50)
.backgroundColor(0x904523)
Text('3')
.width('20%')
.height(50)
.backgroundColor('green')
Text('4')
.width('20%')
.height(50)
.backgroundColor(0x123458)
}
.width('90%')
.height(100)
// 单词
.backgroundColor('red')
// #16进制
.backgroundColor('#F00')
// 0X + 16进制
.backgroundColor(0X0F0)
}
.width('100%')
.margin({top:10})
}
}
3.3 justifyContent
设置子组件在flex容器中的主轴的对齐方式
语法：
Flex({justifyContent:FlexAlign.属性值}){
}
属性值：
- Start 顶部对齐
- Center 居中对齐
- End 尾部对齐
- SpaceBetween 两端对齐
- SpaceAround 左右外边距相同
- SpaceEvenly 间距相同
示例：
@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
@State title: string = "hello world";
//UI描述
build(){
Column({space:10}) {
// justifyContent 设置flex容器在主轴的对齐方式
// justifyContent:FlexAlign.Start 顶部对齐
// justifyContent:FlexAlign.Center 居中对齐
// justifyContent:FlexAlign.End 尾部对齐
// justifyContent:FlexAlign.SpaceBetween 两端对齐
// justifyContent:FlexAlign.SpaceAround 左右外边距相同
// justifyContent:FlexAlign.SpaceEvenly 间距相同
Flex({justifyContent:FlexAlign.SpaceEvenly}){
Text('1')
.width('20%')
.height(50)
.backgroundColor('red')
Text('2')
.width('20%')
.height(50)
.backgroundColor(0x904523)
Text('3')
.width('20%')
.height(50)
.backgroundColor('green')
Text('4')
.width('20%')
.height(50)
.backgroundColor(0x123458)
}
.width('90%')
.height(100)
// 单词
.backgroundColor('red')
// #16进制
.backgroundColor('#F00')
// 0X + 16进制
.backgroundColor(0X0F0)
}
.width('100%')
.margin({top:10})
}
}
3.4 alignltems
设置子组件在flex容器中的交叉轴的对齐方式
语法：
Flex({alignItems:ItemAlign.属性值}){
}
属性值：
- Start 顶部对齐
- Center 居中对齐
- End 底部对齐
- Stretch 伸展，拉伸到容器尺寸
示例：
@Entry //@Entry装饰器 入口组件
@Component ///@Component装饰器 自定义组件
struct Index { //自定义组件 Index组件的名称
@State title: string = "hello world";
//UI描述
build(){
Column({space:10}) {
// alignltems 设置子组件在flex容器中的交叉轴的对齐方式
// alignItems:ItemAlign.Start 顶部对齐
// alignItems:ItemAlign.Center 居中对齐
// alignItems:ItemAlign.End 底部对齐
// alignItems:ItemAlign.Stretch 伸展，拉伸到容器尺寸
Flex({alignItems:ItemAlign.Stretch}){
Text('1')
.width('20%')
.height(30)
.backgroundColor('red')
Text('2')
.width('20%')
.height(40)
.backgroundColor(0x904523)
Text('3')
.width('20%')
.height(50)
.backgroundColor('green')
}
.width('90%')
.height(100)
// 单词
.backgroundColor('red')
// #16进制
.backgroundColor('#F00')
// 0X + 16进制
.backgroundColor(0X0F0)
}
.width('100%')
.margin({top:10})
}
}
4 List
列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
子组件
包含ListItem子组件
接口
List(value?:{space?: number | string, initialIndex?: number, scroller?:Scro11er})
5 ListItem
6 Tabs
通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
子组件
包含子组件Tabcontent。
接口说明
Tabs(value?: {barPosition?: BarPosition, index?: number, controller?:Tabscontro1ler})
参数:
|-------------|----------------|----|-------------------|--------------------|
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
| index | number | 否 | 0 | 指定初次初始页签索引。 |
| controller | TabsController | 否 | - | 设置Tabs控制器。 |
BarPosition枚举说明
|-------|---------------------------------------------------------------|
| 名称 | 描述 |
| Start | vertical属性方法设置为true时，页签位于容器左侧;vertical属性方法设置为false时，页签位于容器顶部。 |
| End | vertical属性方法设置为true时，页签位于容器右侧;vertical属性方法设置为false时，页签位于容器底部。 |
属性
不支持触摸热区设置。
|-------------------|---------|---------------|-----------------------------------------|
| 名称 | 参数类型 | 默认值 | 描述 |
| vertical | boolean | false | 设置为false是为横向Tabs，设置为true时为纵向Tabs。 |
| scrollable | BarMode | true | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。 |
| barMode | BarMode | BarMode.Fixed | TabBar布局模式，具体描述见BarMode枚举说明。 |
| barWidth | Length | - | TabBar的宽度值。 |
| barHeight | Length | - | TabBar的高度值。 |
| animationDuration | number | 200 | TabContent滑动动画时长, |
BarMode枚举说明
|------------|---------------------------|
| 名称 | 描述 |
| Scrollable | TabBar使用实际布局宽度,超过总长度后可滑动。 |
| Fixed | 所有TabBar平均分配宽度。 |
事件
|------------------------------------------|---------------------------------|
| 名称 | 描述 |
| onChange(event: (index: number)=> void) | Tab页签切换后触发的事件。-index:tab标签的索引值。 |
TabsController
Tabs组件的控制器，用于控制Tabs组件进行页签切换。
导入对象
controller:TabsController = new TabsController()
changeindex
控制Tabs切换到指定页签
changelndex(value: number): void
7 TabContent
仅在Tabs中使用，对应一个切换页签的内容视图。
接口
Tabcontent()
属性
|--------|----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 参数类型 | 描述 |
| tabBar | string | Resource | {icon?:string | Resource,text?:string | Resource} | CustomBuilder8+ | 设置TabBar上显示内容。CustomBuilder:构造器，内部可以传入组件(API8版本以上适用)。说明:如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
8 Swiper
滑块视图容器，提供子组件滑动轮播显示的能力。
子组件
可以包含子组件。
接口
Swiper(controller?:SwiperController)
参数
|------------|------------------|----|---------------------|
| 参数名 | 参数类型 | 必墳 | 参数描述 |
| controller | SwiperController | 否 | 给组件绑定一个控制器，用来控制组件翻页 |
属性
|------------------|-----------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 名称 | 参数类型 | 描述 |
| index | number | 设置当前在容器中显示的子组件的索引值。默认值:0 |
| autoPlay | boolean | 子组件是否自动播放，自动播放状态下导航点不可操作。默认值:false |
| interval | number | 使用自动播放时播放的时间间隔，单位为毫秒。默认值:3000 |
| indicator | boolean | 是否启用导航点指示器。默认值:true |
| loop | boolean | 是否开启循环。设置为true时表示开启循环，在LazyForEach懒循环加载模式下加载的组件数量建议大于5个。默认值:true |
| duration | number | 子组件切换的动画时长，单位为毫秒。默认值:400 |
| vertical | boolean | 是否为纵向滑动。默认值:false |
| itemSpace | number string | 设置子组件与子组件之间间隙。默认值:0 |
| displayMode | SwiperDisplayMode | 设置子组件显示模式。默认值:SwiperDisplayMode.Stretch |
| cachedCount8+ | number | 设置预加载子组件个数。默认值:1 |
| disableSwipe8+ | boolean | 禁用组件滑动切换功能，默认值:false |
| displayCount8+ | number|string | 设置一页中显示子组件的个数，设置为"auto"时等同于 SwiperDisplayMode.AutoLinear的显示效果。默认值:1 |
| effectMode8+ | EdgeEffect | 设置滑动到边缘时的显示效果。默认值:EdgeEffect.Spring |
| curve8+ | Curve|string | 设置Swiper的动画曲线，默认为淡入淡出曲线 |
| indicatorStyle8+ | {left?: Length,top?:Length,right?:Length,bottom?: Length,size?:Length,mask?: boolean,color?:ResourceColor,selectedColor?:ResourceColor} | 设置导航点样式:-left: 设置导航点距离Swiper组件左边的距离。- top: 设置导航点距离Swiper组件顶部的距离。-right: 设置导航点距离Swiper组件右边的距离。-bottom:设置导航点距离Swiper组件底部的距离。-size:设置导航点的直径。-mask: 设置是否显示导航点蒙层样式。一color: 设置导航点的颜色。-selectedcolor:设置选中的导航点的颜色 |
9 Grid
网格容器，由"行"和"列"分割的单元格所组成，通过指定"项目"所在的单元格做出各种各样的布局。
子组件
包含GridItem子组件。
接口
Grid(scroller?:scroller)
参数：
|----------|----------|----|------------------------|
| 参数名 | 参数类型 | 必填 | 参数描述 |
| scroller | Scroller | 否 | 可滚动组件的控制器，用于与可滚动组件进行绑定 |
属性
|-----------------|---------------------------|---------------------------------------------------------------------------------------------|
| 名称 | 参数类型 | 描述 |
| columnsTemplate | string | 设置当前网格布局列的数量，不设置时默认1列。例如,"1fr 1fr 2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。默认值:'1fr' |
| rowsTemplate | string | 设置当前网格布局行的数量，不设置时默认1行。例如,"1fr 1fr 2fr"是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。默认值:'1fr |
| columnsGap | Length | 设置列与列的间距。默认值:0 |
| rowsGap | Length | 设置行与行的间距，默认值:0 |
| scrollBar | BarState | 设置滚动条状态。默认值:BarState.0ff |
| scrollBarColor | string | number | Color | 设置滚动条的颜色。 |
| scrollBarWidth | string | number | 设置滚动条的宽度。 |
| cachedCount | number | 设置预加载的Gridltem的数量，具体使用可参考减少应用白块说明。默认值:1 |
| editMode8+ | boolean | 是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部Gridltem。默认值:false |