鸿蒙ArkTS中的布局容器组件（Column、Row、Flex、 Stack、Grid）

　　在鸿蒙ArkTS中，布局容器组件有很多，常见的有：
　　⑴ Column：（垂直布局容器）：用于将子组件垂直排列。
　　⑵ Row：（水平布局容器）：用于将子组件水平排列。
　　⑶ Flex：（弹性布局方式）它提供了更加有效的方法对容器中的子元素进行排列、对齐和分配剩余空间。
　　⑷ Stack：Stack布局是一种可以将多个组件按照一定顺序叠放的布局。
　　⑸ Grid（网格容器）：用于创建二维网格布局，适合需要行列对齐的复杂布局。
　　⑹ List（列表容器）：用于展示列表数据，可以设置列表项的布局和样式。
　　⑺ Tabs（页签容器）：用于创建页签布局，允许用户在不同的页面或视图间切换。
　　⑻ Swiper（滑块视图容器）：用于创建滑动视图，常用于图片轮播或广告等场景。
　　⑼ Scroll（可滑动的容器）：允许用户滚动查看超出视图范围的内容。
　　⑽ RelativeContainer（相对布局容器）：允许子元素相对于容器或指定的兄弟元素进行定位。
　　上面的11中布局容器组件各有特点，共同的特性是：
　　⑴ 空间分配属性（如space）：用于调整子组件之间的间距。
　　⑵ 对齐属性（如justifyContent和alignItems）：用于设置子组件在主轴和交叉轴方向上的对齐方式。
　　⑶ 尺寸属性（如width和height）：用于设置容器的宽度和高度。
　　⑷ 边距和填充（如padding和margin）：用于设置容器的内边距和外边距。
　　⑸ 其他属性，比如背景色等。

　　可以一起学习，方便对比。

　　一、Column和Row

　　Column和Row都是线性布局方式。

　　Column组件：用于创建垂直方向的线性布局，其子组件会按照从上到下的顺序排列。
　　Row组件：用于创建水平方向的线性布局，其子组件会按照从左到右的顺序排列。
　　常用属性：
　　① width：设置组件的宽度。
　　② height：设置组件的高度。
　　③ alignment：设置子组件在垂直方向上的对齐方式（如顶部对齐、底部对齐、居中对齐等）。
　　④ spacing：设置子组件之间的间距。
　　⑤ backgroundColor：设置组件的背景颜色。
　　⑥ padding：设置组件的内边距。
　　⑦ Row组件的特有属性wrap：设置是否允许子组件换行（当子组件总宽度超过Row宽度时）。

　　做一个2行三列的宫格布局，使用Column和Row。

// 获取随机颜色的函数
function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}

@Entry
@Component
struct Index {
  str:string='在鸿蒙ArkTS中，Column和Row是两种常用的布局容器组件，它们分别用于垂直和水平布局。Column（垂直布局容器）用于将子组件垂直排列，Row（水平布局容器）用于将子组件水平排列。'
  build() {
    Column() {
        Row(){
          Column(){
            Text(this.str)
              .fontSize(18).fontColor(getRandomColor()).textAlign(TextAlign.Center)
              .maxLines(4).textOverflow({
              overflow:TextOverflow.Ellipsis
            })
          }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor()).align(Alignment.Center)
          }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.layoutWeight(1).height('100%').justifyContent(FlexAlign.Center)
        }.height('50%')
        Row(){
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
          Column(){
            Text(this.str).fontSize(18).fontColor(getRandomColor())
          }.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).layoutWeight(1).height('100%')
        }.height('50%')
    }.width('100%').height('100%')
  }
}

　　效果图：

　　代码写得有些乱，主要是公共的属性太多，可以使用@style和@Extend来优化代码，并且还可以提供变化的灵活性。

　　下面的代码@Style只是展示一种写法，主要是@Extend（组件）的写法。

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Extend(Text) function CustomText() {
  .fontColor(getRandomColor())
  .fontSize(18)
  .textAlign(TextAlign.Center)
  .maxLines(5)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}
@Extend(Column) function ColumnCustomAttr(){
  .justifyContent(FlexAlign.Center)
  .alignItems(HorizontalAlign.Center)
}

@Entry
@Component
struct Index {
  str: string = '在鸿蒙ArkTS中，Column和Row是两种常用的布局容器组件，它们分别用于垂直和水平布局。Column（垂直布局容器）用于将子组件垂直排列，Row（水平布局容器）用于将子组件水平排列。'
  @Styles
  CommonStyle() {
    .layoutWeight(1)
    .height('100%')
    .padding({top:5,left:5,right:5,bottom:5})
    .margin({top:5,left:5,right:5,bottom:5})
    .border({width:2,color:getRandomColor()})
  }
  build() {
        Column() {
            Row() {
                Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
            }.height('50%')
            Row() {
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText().CommonStyle() }.CommonStyle().ColumnCustomAttr()
                Column() { Text(this.str).CustomText() }.CommonStyle().ColumnCustomAttr()
            }.height('50%')
        }.width('100%').height('100%')
  }
}

　　上面的代码就整洁了一些，而且方便修改，无论修改的是公共属性还是组件独有属性。

　　实际效果图：

　　二、Flex（弹性布局组件）

　　Flex布局是一种二维布局模型，它可以在任意方向上对元素进行排列，并且可以动态地调整元素的大小和位置，以适应不同的屏幕尺寸和设备。通过使用Flex布局，可以实现响应式布局效果。

　　Flex（弹性伸缩布局）组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴，Column相当于Flex中的交叉轴。

　　Flex主要属性：

　　① direction（主轴的方向）：用于指定子组件在Flex容器上排列的方向，即主轴的方向。可选值包括Row（主轴方向为水平向右）、RowReverse（主轴方向为水平向左）、Column（主轴方向为垂直向下）和ColumnReverse（主轴方向为垂直向上）。

　　② justifyContent（主轴的对齐方式）：用于定义所有子组件在Flex容器主轴上的对齐方式。，可选值：justifyContent：FlexAlign.Start / Center / End / SpaceBetween / SpaceAround / SpaceEvenly，共有6种方式。

　　③ alignItems（交叉轴的对弃方式）：用于定义所有子组件在Flex容器交叉轴上的对齐方式。可选值：alignItems.Auto / Start / Center / End / Baseline /Stretch，共有6种方式。

　　④ wrap（布局换行）：用于确定Flex容器是单行/列排列还是多行/列排列。在多行布局时，它还会通过交叉轴方向确定新行的堆叠方向。可选值：wrap：FlexWrap.NoWrap / Wrap / WrapReverse。

　　演示：

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Extend(Text) function CustomText() {
  .fontColor(getRandomColor()).fontSize(18).textAlign(TextAlign.Center)
  .maxLines(5).textOverflow({ overflow: TextOverflow.Ellipsis })
  .margin(5).padding(5)
  .height('50%').width('30%')
  .border({width:2,color:getRandomColor()})
}
@Entry
@Component
struct Index {
  str: string = 'Flex（弹性伸缩布局）组件当容器的宽或者高超出父容器时会默认进行压缩显示。Row相当于Flex中的主轴，Column相当于Flex中的交叉轴。'
  build() {
      Flex({wrap:FlexWrap.Wrap}){
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
        Text(this.str).CustomText()
      }.height('100%').width('100%')
  }
}

　　效果图：

　　三、Stack（层叠布局组件）

　　Stack布局是一种可以将多个组件按照一定顺序叠放的布局。在Stack布局中，后添加的组件会自动覆盖前面添加的组件，可以通过设置zIndex控制层级。

　　① 层叠效果：组件需要有堆叠效果时优先考虑此布局，层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。
　　② zIndex控制：通过设置子组件的zIndex可以控制层级，zIndex越大越在上层。
　　③ 动画支持：Stack布局还支持添加动画，通过动画可以实现组件的平移、旋转等动态效果。

　　Stack主要的布局属性：alignContent:Alignment.Bottom / ToStart / Top / TopEnd / Start / End / Center / BottomSatrt /Bottom / BottomEnd 共有9种样式

　　测试代码：

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Extend(Button) function CustomText(iW:number,iH:number,iZ:number) {
  .fontColor(Color.White).fontSize(18)
  .margin(5).padding(5)
  .height(iH).width(iW)
  .backgroundColor(getRandomColor())
  .align(Alignment.Start)
  .border({width:1,color:getRandomColor()})
  .zIndex(iZ)
}
@Entry
@Component
struct Index {
  @State zIndexValue:number[]=[1,2,3,4,5,6]
  build() {
      Stack({alignContent:Alignment.Bottom}){
        Button('1').CustomText(300,50,this.zIndexValue[0]).onClick(()=>{
          this.zIndexValue[0]=-this.zIndexValue[0]
        })
        Button('2').CustomText(250,100,this.zIndexValue[1]).onClick(()=>{
          this.zIndexValue[1]=-this.zIndexValue[1]
        })
        Button('3').CustomText(200,200,this.zIndexValue[2]).onClick(()=>{
          this.zIndexValue[2]=-this.zIndexValue[2]
        })
        Button('4').CustomText(150,300,this.zIndexValue[3]).onClick(()=>{
          this.zIndexValue[3]=-this.zIndexValue[3]
        })
        Button('5').CustomText(100,400,this.zIndexValue[4]).onClick(()=>{
          this.zIndexValue[4]=-this.zIndexValue[4]
        })
        Button('6').CustomText(50,500,this.zIndexValue[5]).onClick(()=>{
          this.zIndexValue[5]=-this.zIndexValue[5]
        })
      }.height('100%').width('100%').backgroundColor(Color.Pink)
  }
}

　　效果图：

　　点击按钮可以更改按钮的叠放次序。

　　四、Grid（层叠布局组件）

　　Grid组件用于控制网格的布局和样式。
　　常用的属性：
　　① columnsTemplate：设置网格布局的列数及每列的宽度比例。例如，'1fr 1fr 1fr'表示将容器分为三列，每列占据相同的宽度。
　　② rowsTemplate：设置网格布局的行数及每行的高度比例。例如，'1fr 1fr'表示将容器分为两行，每行占据相同的高度。
　　③ columnsGap：设置列与列之间的间距。
　　④ rowsGap：设置行与行之间的间距。
　　⑤ width：设置Grid组件的宽度。
　　⑥ height：设置Grid组件的高度。
　　⑦ backgroundColor：设置Grid组件的背景颜色。
　　⑧ scroller：可滚动组件的控制器，用于与可滚动组件进行绑定（可选）。

　　GridItem是Grid的子组件，用于在网格中定义具体的项目（即单元格的内容）。GridItem组件支持多种属性，用于控制项目的布局和样式。
　　常用属性：
　　① rowStart、rowEnd：指定当前GridItem元素的起始行号和终点行号。
　　② columnStart、columnEnd：指定当前GridItem元素的起始列号和终点列号。

　　测试代码：

function getRandomColor() {
    const letters :string= '0123456789ABCDEF';
    let color:string = '#';
    for (let i = 0; i < 6; i++) {
      let Itemp:number=Math.floor(Math.random() * 16)
      color += letters.substr(Itemp,1);
    }
    return color;
}
@Entry
@Component
struct Index {
  @State numbers: string[] = ['1', '2', '3', '4','5','6'];

  build() {
    Column() {
      Grid() {
        ForEach(this.numbers, (item: string, index: number) => {
          GridItem() {
                Text(item)
                  .fontSize(16)
                  .backgroundColor(getRandomColor())
                  .width('50%')
                  .height('50%')
                  .textAlign(TextAlign.Center)
                  .padding(20)
                  .margin(20)
          }
          .backgroundColor(getRandomColor())
        })
      }.columnsTemplate('1fr 1fr').rowsTemplate('1fr 1fr 1fr')
    }
  }
}

　　效果图：

　　实际在使用布局组件中，常常多种容器组件结合起来使用。