HarmonyOS ——Grid（网格图）简单使用

网格布局Grid/GridItem的简单使用。在使用过程中要注意Grid和GridItem尺寸。

`

@Entry
@Component
struct Demo_Grid {

  //定义一个长度为18的空数组
  arrys: number[] = Array.from<number>({length: 12})

  //定义Scroller控制器
  scroller: Scroller = new Scroller()

  build() {
    Column({space: 10}){

      Grid(){
        ForEach(this.arrys,(item: number, index: number)=>{
          //GridItem是Grid的唯一子组件,不设置GridItem尺寸，默认填满Grid
          GridItem(){
            Column(){
              Text(index.toString())
                .fontColor(Color.White)
            }
          }
          .backgroundColor(Color.Blue)
        })
      }
      //不给Grid设置宽高，默认适应父组件
      .height('30%')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr')
      .rowsGap(6)
      .columnsGap(6)


      //Grid滚动，
      Grid(){
        ForEach(this.arrys,(item: number, index: number)=>{
          //个人建议：先对GridItem设置尺寸，在对子组件设置尺寸。这样可以使内容居中。
            GridItem(){
              Text(index.toString())
            }
            .width(100)
            .backgroundColor(Color.Green)
        })
      }
      .width('100%')
      .height('30%')
      .rowsTemplate('1fr')
      .columnsGap(6)

      //控制器控制Grid翻页
      //2.绑定控制器
      Grid(this.scroller){
        ForEach(this.arrys,(item: number, index: number)=>{
          //个人建议：先对GridItem设置尺寸，在对子组件设置尺寸。这样可以使内容居中。
          GridItem(){
            Text(index.toString())
          }
          .width(100)
          .backgroundColor(Color.Brown)
        })
      }
      .width('100%')
      .height('30%')
      .rowsTemplate('1fr')
      .columnsGap(6)
      
      //3.调用控制器
      Row(){
        Button('上一页').onClick((event: ClickEvent) => {
          this.scroller.scrollPage({next: false })
        })
        Button('下一页').onClick(()=>{
          this.scroller.scrollPage({next: true})
        })
      }



    }
    .width('100%')
    .height('100%')


  }
}

`