#Dayu200体验官#第三章 openharmony eTS之常用布局

一、eTS之Row讲解

①、Row水平方向布局容器

Row(value:{space?: Length})

参数：

属性：

• VerticalAlign枚举说明

  名称	描述
  Top	顶部对齐。
  Center	居中对齐，默认对齐方式。
  Bottom	底部对齐。

②、Row控件上手实战

Row代码：

@Entry
@Component
struct Rowyukoyu {
  build() {
    Row({ space: 5 }) { //水平方向布局容器
      Text('1')
        .width('10%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
      Text('1')
        .width('20%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
      Text('1')
        .width('30%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
      Text('1')
        .width('40%')
        .fontSize(50)
        .backgroundColor("#000000")
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

Row展示：

二、Column讲解

①、Column垂直方向布局的容器

Column(value:{space?: Length})

参数：

属性：

• HorizontalAlign枚举说明

  名称	描述
  Start	按照语言方向起始端对齐。
  Center	居中对齐，默认对齐方式。
  End	按照语言方向末端对齐。

②、Row、Column控件上手实战

Column代码：

@Entry
@Component
struct Columnyukoyu {
  build() {
    Column() {      //垂直方向布局的容器
      Text('Hello World')
        .fontSize(50)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
        .height('10%')
        .fontWeight(FontWeight.Bold)
      Text('Hello World')
        .fontSize(50)
        .fontColor("#ffffff")
        .backgroundColor('#000000')
        .height('20%')
        .margin({top:5})
        .fontWeight(FontWeight.Bold)
      Text('Hello World')
        .fontSize(50)
        .fontColor("#ffffff")
        .backgroundColor('#000000')
        .height('30%')
        .margin({top:5})
        .fontWeight(FontWeight.Bold)
      Text('Hello World')
        .fontSize(50)
        .fontColor("#ffffff")
        .backgroundColor('#000000')
        .height('40%')
        .margin({top:5})
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

Column展示：

二、eTS之Flex讲解

①、Flex弹性布局容器

Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })

标准Flex布局容器。

参数：

• FlexDirection枚举说明

  名称	描述
  Row	主轴与行方向一致作为布局模式。
  RowReverse	与Row方向相反方向进行布局。
  Column	主轴与列方向一致作为布局模式。
  ColumnReverse	与Column相反方向进行布局。

• FlexWrap枚举说明

  名称	描述
  NoWrap	Flex容器的元素单行/列布局，子项允许超出容器。
  Wrap	Flex容器的元素多行/列排布，子项允许超出容器。
  WrapReverse	Flex容器的元素反向多行/列排布，子项允许超出容器。

• FlexAlign枚举说明

  名称	描述
  Start	元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
  Center	元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
  End	元素在主轴方向尾部对齐, 最后一个元素与行尾对齐，其他元素与后一个对齐。
  SpaceBetween	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
  SpaceAround	Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
  SpaceEvenly	Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

②、Flex 控件上手实战

Flex代码：

@Entry
@Component
struct Flexyukoyu {
  build() {
    //Flex弹性布局是比较灵活的控件
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
      Text('Hello World')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .backgroundColor('#000000')
        .fontColor("#ffffff")
    }
    .width('100%')
    .height('100%')
  }
}

Flex展示：