目录

• 说些废话
• 环境
• 代码
• 展示

说些废话

    官方文档：容器组件-Grid（基于ArkTS的声明式开发范式）
    没有安装到真机上，直接用预览器看的。创建的是API为8的华为鸿蒙工程。

环境

    DevEco Studio 3.1 Canary1
    SDK 8
    我看的《API参考》更新时间为2022-12-16 17:46

代码

@Entry@Componentstruct Index {  @State columns: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8]  build() {    Row() {      Column() { //不使用循环 Grid(){   //Grid的子组件只能为GridItem   //0   GridItem(){     Text(this.columns[0] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .size({     width:'100%',     height:'100%'   })   //1   GridItem(){     Text(this.columns[1] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .columnStart(1)   .columnEnd(2)   .size({     width:'100%',     height:'100%'   })   //2//   GridItem(){//     Text(this.columns[2] + '')//.fontSize(20)//   }//   .backgroundColor('#ff7cbeff')//   .size({//     width:'100%',//     height:'100%'//   })   //3   GridItem(){     Text(this.columns[3] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .size({     width:'100%',     height:'100%'   })   //4   GridItem(){     Text(this.columns[4] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .rowStart(1)   .rowEnd(2)   .size({     width:'100%',     height:'100%'   })   //5   GridItem(){     Text(this.columns[5] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .size({     width:'100%',     height:'100%'   })   //6   GridItem(){     Text(this.columns[6] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .size({     width:'100%',     height:'100%'   })   //7//   GridItem(){//     Text(this.columns[7] + '')//.fontSize(20)//   }//   .backgroundColor('#ff7cbeff')//   .size({//     width:'100%',//     height:'100%'//   })   //8   GridItem(){     Text(this.columns[8] + '').fontSize(20)   }   .backgroundColor('#ff7cbeff')   .size({     width:'100%',     height:'100%'   }) } //设置Grid为3列，并且均分 .columnsTemplate("1fr 1fr 1fr") //设置3行，并且均分 .rowsTemplate("1fr 1fr 1fr") //设置列间距为1vp .columnsGap(1) //设置行间距为1vp .rowsGap(1) .size({   width:'100%',   height:'50%' }) //使用循环 Grid(){   //虽然循环的是9个，但是因为合并之后页面上只有7个组件，所以其实是循环到7就行了，   //多循环了摆在哪里我也不知道，反正用if把合并这个空位GridItem不创建就是空的，无语。   ForEach(this.columns, (item, index) => {     //使用ForEach语法循环创建GridItem组件     GridItem(){Text('' + this.columns[index])  .fontSize(20)     }     .columnStart(index == 1 ? 1 : 0)     .columnEnd(index == 1 ? 2 : 0)     //原本这个位置应该是和4合并，也因为实际展示的是7个，前面二合一了而此处变成3了。。。     .rowStart(index == 3 ? 1 : 0)     .rowEnd(index == 3 ? 2 : 0)     .backgroundColor('#ffffa57c')     .size({width:'100%',height:'100%'     })   }) } //设置Grid为3列，并且均分 .columnsTemplate("1fr 1fr 1fr") //设置3行，并且均分 .rowsTemplate("1fr 1fr 1fr") //设置列间距为1vp .columnsGap(1) //设置行间距为1vp .rowsGap(1) .size({   width:'100%',   height:'50%' })      }      .width('100%')    }    .height('100%')  }}

展示