鸿蒙HarmonyOS实战-ArkUI组件(Grid/GridItem)

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

scss 复制代码
Grid() {
  ...
}
.rowsTemplate('1fr 1fr 1fr')
.columnsTemplate('1fr 2fr 1fr')

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

1、0的设置

scss 复制代码
GridItem() {
  Text(key)
    ...
}
.columnStart(1)
.columnEnd(2)

2、=号的设置

scss 复制代码
GridItem() {
  Text(key)
    ...
}
.rowStart(5)
.rowEnd(6)

🦋3.3 设置主轴方向

scss 复制代码
Grid() {
  ...
}
.maxCount(3)
.layoutDirection(GridDirection.Row)

🔎4.案例

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

scss 复制代码
@Entry
@Component
struct Index {
  build() {
    Grid() {
      GridItem() {
        Text('会议')
      }

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

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

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

🦋4.2 设置行列间距

scss 复制代码
Grid() {
  ...
}
.columnsGap(10)
.rowsGap(15)

🦋4.3 构建可滚动的网格布局(官方)

scss 复制代码
@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 在网格布局中显示数据(官方)

scss 复制代码
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 长网格处理

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

scss 复制代码
Grid() {
  LazyForEach(this.dataSource, item => {
    GridItem() {
      ...
    }
  })
}
.cachedCount(3)

🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识。
  • 想要获取最新鸿蒙学习资料,请点击→全套鸿蒙HarmonyOS学习资料

原文出处bbs.huaweicloud.com/blogs/41961...

相关推荐
在人间耕耘几秒前
HarmonyOS 开发学习分享:从入门到认证的完整路径
华为·harmonyos
索迪迈科技13 分钟前
影视APP源码 SK影视 安卓+苹果双端APP 反编译详细视频教程+源码
android·影视app源码·sk影视
森之鸟19 分钟前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
孔丘闻言20 分钟前
python调用mysql
android·python·mysql
程序员潘Sir2 小时前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙
萧雾宇2 小时前
Android Compose打造仿现实逼真的烟花特效
android·flutter·kotlin
翻滚丷大头鱼3 小时前
android 性能优化—ANR
android·性能优化
翻滚丷大头鱼3 小时前
android 性能优化—内存泄漏,内存溢出OOM
android·性能优化
拜无忧3 小时前
【教程】flutter常用知识点总结-针对小白
android·flutter·android studio