鸿蒙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(){