鸿蒙HarmonyOS实战-ArkUI组件（Grid/GridItem）

2024-03-29 23:28 由蜀道山QAQ 发表于 #移动端开发

🚀一、Grid/GridItem

🔎1.概述

网格布局是一种新型的布局方式，它按照网格来划分页面，通过列和行来定义网格，使得页面的布局更加灵活、简洁、易于维护。网格布局能够将页面分成多个单元格，可以在这些单元格中布置各种元素，例如文本、图片、媒体等，从而实现页面的排版。网格布局支持自适应布局，能够轻松地实现响应式设计，支持多终端设备的显示。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

🔎2.布局与约束

1、Grid与GridItem组件关系

Grid的子组件必须是GridItem组件

2、网格布局

Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时提供了垂直和水平布局能力

🔎3.设置排列方式

🦋3.1 设置行列数量与占比

通过设置行列数量与尺寸占比，可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性，用于设置网格布局的行列数量与尺寸占比。 rowsTemplate和columnsTemplate属性值是一个由多个空格和’数字+fr’间隔拼接的字符串，其中fr的个数即为网格布局的行或列数。数字表示该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

Grid() {
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

🦋3.2 设置子组件所占行列数

1、0的设置

GridItem() {
  Text(key)
    ...
}
.columnStart(1)
.columnEnd(2)

2、=号的设置

GridItem() {
  Text(key)
    ...
}
.rowStart(5)
.rowEnd(6)

🦋3.3 设置主轴方向

Grid() {
  ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)

🔎4.案例

🦋4.1 在网格布局中显示数据

@Entry
@Component
struct Index {
  build() {
    Grid() {
      GridItem() {
        Text('会议')
      }

      GridItem() {
        Text('签到')
      }

      GridItem() {
        Text('投票')
      }

      GridItem() {
        Text('打印')
      }
    }
    .rowsTemplate('1fr 1fr')
    .columnsTemplate('1fr 1fr')
  }
}

🦋4.2 设置行列间距

Grid() {
  ...
}
.columnsGap(10)
.rowsGap(15)

🦋4.3 构建可滚动的网格布局（官方）

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

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

滑动后

🦋4.4 在网格布局中显示数据（官方）

private scroller: Scroller = new Scroller()
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
       })
     })
 }
}
...

🦋4.5 长网格处理

和长列表类似就不做多说了

Grid() {
  LazyForEach(this.dataSource, item => {
    GridItem() {
      ...
    }
  })
}
.cachedCount(3)

🚀写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY