openharmony容器组件之Column

Column：沿垂直方向布局的容器

Column(value:{space?: Length}) //space：纵向布局元素间距，默认为0
Column属性：
1，alignItems（设置子组件在水平方向上的对齐格式）
2，justifyContent8+（设置子组件在垂直方向上的对齐格式）

直接上图：

上代码：

@Entry
@Component
struct ColumnT {
  build() {
    Column() {
      Text('space').fontSize(9).fontColor(0x000000).width('90%')
      //space：纵向布局元素间距
      Column({ space: 5 }) {
        Text().width('100%').height(30).backgroundColor(0xAFEEEE)
        Text().width('100%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(80).border({ width: 1 })

      Text('alignItems').fontSize(9).fontColor(0x000000).width('90%')
      //alignItems：设置子组件在水平方向上的对齐格式(属性有：Start，Center，End)，默认Center
      Column({ space: 5 }) {
        Text().width('50%').height(30).backgroundColor(0xAFEEEE)
        Text().width('50%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(HorizontalAlign.Center).width('90%').height(80).border({ width: 1 })

      Text('justifyContent').fontSize(9).fontColor(0x000000).width('90%')
      //justifyContent:设置子组件在垂直方向上的对齐格式
      Column() {//注意：此处不能添加space属性，添加之后justifyContent属性失效(基于sdk8)
        Text().width('50%').height(30).backgroundColor(0xAFEEEE)
        Text().width('50%').height(30).backgroundColor(0x00FFFF)
      }.height('15%').border({width:1}).justifyContent(FlexAlign.End)

    }
    .width('100%')
    .height('100%')
  }
}