鸿蒙Column和Row容器的用法（附带实例）

Column 是沿垂直方向布局的容器。Row 是沿水平方向布局的容器。Column 和 Row 是常用的容器组件，它们有很多共同参数，但是相同的参数在不同容器中的展示是有所区别的。

Column 和 Row 的构造函数都有 space 参数，用来表示元素的间距。

Column 和 Row 都包含属性 alignItems 和 justifyContent，用来设置子组件的对齐格式。它们的区别是：

• 对应 Column 而言，alignItems 用于设置子组件在水平方向上的对齐格式，默认值是 HorizontalAlign.Center，justifyContent 用于设置子组件在垂直方向上的对齐格式，默认值是 FlexAlign.Start；
• 而 Row 则相反，alignItems 用于设置子组件在垂直方向上的对齐格式，默认值是 VerticalAlign.Center，justifyContent 用于设置子组件在水平方向上的对齐格式，默认值是 FlexAlign.Start。

Column 的示例代码如下：

Row(){
    Text('Column的使用').fontSize(20).fontWeight(800).width(1000).height(30)
}
Column({ space: 5 }) {
    // 设置子元素垂直方向间距为5
    Text('设置子元素垂直方向间距为5: space').width('90%')
    Column({ space: 5 }) {
        Column().width('100%').height(30).backgroundColor(0xAFEEEE)
        Column().width('100%').height(30).backgroundColor(0x00FFFF)
        .width('90%').height(100).border({ width: 1 })
    }
    // 设置子元素水平方向对齐方式
    Text('设置子元素水平方向对齐方式:alignItems(Start)').width('90%')
    Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
        .alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })
    }
    Text('设置子元素水平方向对齐方式:alignItems(End)').width('90%')
    Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
        .alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })
    }
    Text('设置子元素水平方向对齐方式:alignItems(Center)').width('90%')
    Column() {
        Column().width('50%').height(30).backgroundColor(0xAFEEEE)
        Column().width('50%').height(30).backgroundColor(0x00FFFF)
        .alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })
    }
    // 设置子元素垂直方向的对齐方式
    Text('设置子元素垂直方向的对齐方式:justifyContent(Center)').width('90%')
    Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
        .height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)
    }
    Text('设置子元素垂直方向的对齐方式:justifyContent(End)').width('90%')
    Column() {
        Column().width('90%').height(30).backgroundColor(0xAFEEEE)
        Column().width('90%').height(30).backgroundColor(0x00FFFF)
        .height(100).border({ width: 1 }).justifyContent(FlexAlign.End)
        .width('100%').padding({ top: 5 })
    }
}

Column 的效果如下图所示：


Row 的示例代码如下：

Row(){
    Text('Row的使用').fontSize(20).fontWeight(800).width('100%').height(30)
}
Column({ space: 5 }) {
    // 设置子组件水平方向的间距为5
    Text('设置子组件水平方向的间距为5: space').width('90%')
    Row({ space: 5 }) {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
        .width('90%').height(100).border({ width: 1 })
    }
    // 设置子元素垂直方向对齐方式
    Text('设置子元素垂直方向对齐方式:alignItems(Bottom)').width('90%')
    Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
        .width('90%').alignItems(VerticalAlign.Bottom).height('15%').border({ width: 1 })
    }
    Text('设置子元素垂直方向对齐方式:alignItems(Center)').width('90%')
    Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
        .width('90%').alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
    }
    // 设置子元素水平方向对齐方式
    Text('设置子元素水平方向对齐方式:justifyContent(End)').width('90%')
    Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
        .width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
    }
    Text('设置子元素水平方向对齐方式:justifyContent(Center)').width('90%')
    Row() {
        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
        Row().width('30%').height(50).backgroundColor(0x00FFFF)
        .width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
    }.width('100%')
}

Row 的效果如下图所示：