鸿蒙开发技术之网格布局【华为根技术】

  Grid() {
    GridItem() {
      Text('1')
    }.border({ width: 1, color: '#f00' })
  }
  .border({ width: 1, color: '#f00' })
  .columnsTemplate('1fr 1fr 2fr')  // 设置当前网格布局列的数量  
  // .rowsTemplate('1fr 1fr 2fr')  // 设置当前网格布局行的数量  
  // .columnsGap(10)  // 列间距
  // .rowsGap(10)     // 行间距

@Entry
@Component
struct Test {
  @State arr : string[] = ['1','2','3','4','5','6','7','8','9','10']
  build() {
    Column() {
      Text("aa")
      // 默认宽高由内容撑起来
      Grid() {
        ForEach(this.arr,(item:string)=>{
          GridItem() {
            Text(item)
          }
          .border({width:1, color: '#0f0'})
          // 每个网格项目设置宽100，高60
          // 超出屏幕宽度会自动换行
          .width(100)
          .height(60)
        },(item:string)=>item)
      }
      .border({width:1, color: '#f00'})
    }
  }
}

Grid(){
}
// 设置当前网格布局行的数量，不设置时默认1行。
.rowsTemplate('1fr')
.rowsTemplate('1fr 1fr')
// 是将父组件分3行，将父组件允许的高分为4等份，
// 第一行占1份，第二行占一份，第三行占2份。
.rowsTemplate('1fr 1fr 2fr')
 

作业

构建可滚动的网格布局
可滚动的网格布局常用在文件管理、购物或视频列表等页面中，如下图所示。在设置Grid的行列数量与占比时，如果仅设置行、列数量与占比中的一个，即仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。

横向可滚动网格布局

@Entry
@Component
struct Shopping {
  @State services: Array<string> = ['直播', '进口']

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.services, (service: string, index) => {
          GridItem() {
          }
          .width('25%')
        }, (service:string):string => service)
      }
      .rowsTemplate('1fr 1fr') // 只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。
      .rowsGap(15)
    }
  }
}

控制滚动位置

与新闻列表的返回顶部场景类似，控制滚动位置功能在网格布局中也很常用，例如下图所示日历的翻页功能。

Grid组件初始化时，可以绑定一个 Scroller 对象，用于进行滚动控制，例如通过Scroller对象的 scrollPage 方法进行翻页。

private scroller: Scroller = new Scroller()

在日历页面中，用户在点击“下一页”按钮时，应用响应点击事件，通过指定scrollPage方法的参数next为true，滚动到下一页。

Column({ space: 5 }) {
  Grid(this.scroller) {
  }
  .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')

  Row({space: 20}) {
    Button('上一页')
      .onClick(() => {
        this.scroller.scrollPage({
          next: false
        })
      })

    Button('下一页')
      .onClick(() => {
        this.scroller.scrollPage({
          next: true
        })
      })
  }
}

总结

网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局