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

2024-04-19
湖南
本文字数：1618 字
阅读完需：约 5 分钟

🚀一、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 的个数即为网格布局的行或列数。数字表示该行或列在网格布局宽度上的占比，最终决定该行或列的宽度。

更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY

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@Componentstruct 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 构建可滚动的网格布局（官方）

@Componentstruct 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

发布于: 刚刚阅读数: 2

蜀道山

关注

欢迎关注作者公众号：【蜀道衫】 2023-12-29 加入

3年Java后端，5年Android应用开发，精通Java高并发、JVM调优、以及Android开发各种技能。现专研学习鸿蒙HarmonyOS Next操作系统

发布

暂无评论

创作场景

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

🚀一、Grid/GridItem

🔎1.概述

🔎2.布局与约束

🔎3.设置排列方式

🦋3.1 设置行列数量与占比

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

🦋3.3 设置主轴方向

🔎4.案例

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

🦋4.2 设置行列间距

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

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

🦋4.5 长网格处理

🚀写在最后

蜀道山

评论