HarmonyOS应用开发学习-ArkUI-容器组件

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 |

10 GridItem