鸿蒙Next 线性布局 (Row/Column)

Column 子元素按直方向排列 Row 子元素按水平方向排列 基本概念 主轴：Row容器主轴为水平方向，Column容器主轴为垂直方向。 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为垂直方向，Column容器交叉轴为水平方向。 当不指定宽高时，自身默认宽高由子组件决定，这时设置排列方向是看不到效果的。

Column交叉轴方向即横向，只有3个参数HorizontalAlign.Start，Center，End，即子组件按左，居中，右排列，比较简单。 Row交叉轴方向即纵向，是由VerticalAlign.Top,Center,Bottom，即子组件按上，居中，下排列。 以下演示一下主轴方向的排列，也是比较常用的：FlexAlign Start 首端对齐 Center 中心对齐 End 尾部对齐 SpaceBetween 第一个元与行首对齐，最后一个元素尾对齐，相邻元素间距相同 SpaceAround 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半 SpaceEvenly 相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样

@Entry
@Component
struct test{
  build() {
    Column({space:'40'}){
      Row(){
        Column(){
          Text('1').height(90).width('100%').backgroundColor(0xF5DEB3)
          Text('2').width('100%').backgroundColor(0xF5DEB3)
          Text('3').width('100%').backgroundColor(0xF5DEB3)
        }.height(360).width(50).backgroundColor(Color.Orange)
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(HorizontalAlign.Start)
        Column(){
          Text('1').width('100%').backgroundColor(0xF5DEB3)
          Text('2').height(90).width('100%').backgroundColor(0xF5DEB3)
          Text('3').width('100%').backgroundColor(0xF5DEB3)
        }.height(360).width(50).backgroundColor(Color.Blue)
        .justifyContent(FlexAlign.SpaceAround)
        Column(){
          Text('1').width('100%').backgroundColor(0xF5DEB3)
          Text('2').width('100%').backgroundColor(0xF5DEB3)
          Text('3').height(90).width('100%').backgroundColor(0xF5DEB3)
        }.height(360).width(50).backgroundColor(Color.Green)
        .justifyContent(FlexAlign.SpaceEvenly)
      }.width('100%').alignItems(VerticalAlign.Center).justifyContent(FlexAlign.SpaceEvenly)
//当我们需要在一行首尾增加一个布局时，除了使用RelativeContainer相对布局之外，还可以使用这种方式，利用SpaceBetween首尾排列，然后再设置尾部元素距离右边距，即可实现
    Row(){
        Column(){}.height(40).width(100).backgroundColor(Color.Green)
        Column(){}.height(40).width(50).backgroundColor(Color.Brown).margin({right:50})
    }.width('100%').justifyContent(FlexAlign.SpaceBetween)
    }.width('100%').backgroundColor(Color.Gray)
  }
}