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

ArkUI-容器组件

1 ROW组件

沿水平方向布局容器。可以包含子组件。

Row(value?:{space?:string | number})

参数：

属性：

示例：

//@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})

参数：

属性：

示例：

@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 })

参数：

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枚举说明

属性

不支持触摸热区设置。

BarMode枚举说明

事件

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。

导入对象

controller:TabsController = new TabsController()

changeindex

控制Tabs切换到指定页签

changelndex(value: number): void

7 TabContent

仅在Tabs中使用，对应一个切换页签的内容视图。

接口
Tabcontent()

属性

8 Swiper

滑块视图容器，提供子组件滑动轮播显示的能力。

子组件
可以包含子组件。

接口
Swiper(controller?:SwiperController)

参数

属性

9 Grid

网格容器，由“行”和“列”分割的单元格所组成，通过指定”项目”所在的单元格做出各种各样的布局。

子组件
包含GridItem子组件。
接口
Grid(scroller?:scroller)

参数：

属性

10 GridItem