鸿蒙~ArkUI 基础 Grid网格布局

一、设置排列方式

  • 设置行列数量与占比
    通过设置行列数量与尺寸占比可以确定网格布局的整体排列方式。Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。

rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串,fr的个数即网格布局的行或列数,fr前面的数值大小,用于计算该行或列在网格布局宽度上的占比,最终决定该行或列的宽度

java 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Grid() {
      GridItem() {
        Text("1")
      }.backgroundColor(Color.Black)

      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)

      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)

      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)

      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)

      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)

      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)

      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 1fr')
  }
}
  • 设置子组件所占行列数
    除了大小相同的等比例网格布局,由不同大小的网格组成不均匀分布的网格布局场景在实际应用中十分常见,如下图所示。在Grid组件中,通过设置GridItem的rowStart、rowEnd、columnStart和columnEnd可以实现如图所示的单个网格横跨多行或多列的场景。
java 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Grid() {
      GridItem() {
        Text("1")
      }
      .backgroundColor(Color.Black)
      .columnStart(1)
      .columnEnd(3)

      GridItem() {
        Text("2")
      }.backgroundColor(Color.Blue)

      GridItem() {
        Text("3")
      }.backgroundColor(Color.Brown)

      GridItem() {
        Text("4")
      }.backgroundColor(Color.Green)


      GridItem() {
        Text("5")
      }.backgroundColor(Color.Grey)

      GridItem() {
        Text("6")
      }.backgroundColor(Color.Orange)

      GridItem() {
        Text("7")
      }.backgroundColor(Color.Pink)

      GridItem() {
        Text("8")
      }.backgroundColor(Color.Red)

      GridItem() {
        Text("9")
      }.backgroundColor(Color.Yellow)
    }
    .rowsTemplate('1fr 2fr 2fr')
    .columnsTemplate('1fr 2fr 1fr')
  }
}
  • 设置主轴方向
    使用Grid构建网格布局时,若没有设置行列数量与占比,可以通过layoutDirection可以设置网格布局的主轴方向,决定子组件的排列方式。此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量
  1. layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效,此时元素在layoutDirection方向上排列。

  2. 仅设置rowsTemplate时,Grid主轴为水平方向,交叉轴为垂直方向。

  3. 仅设置columnsTemplate时,Grid主轴为垂直方向,交叉轴为水平方向。

  • 设置行列间距
    通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。在图5所示的计算器中,行间距为15vp,列间距为10vp。

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
沈剑心2 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
Georgewu3 小时前
【HarmonyOS】鸿蒙应用加载读取csv文件
前端·harmonyos
Georgewu3 小时前
【HarmonyOS】 鸿蒙图片或视频保存相册
前端·harmonyos
川石教育9 小时前
鸿蒙开发-ArkTS 中使用 filter 组件
harmonyos·鸿蒙·鸿蒙应用开发·鸿蒙开发·鸿蒙开发培训·arkts语言
李洋-蛟龙腾飞公司9 小时前
HarmonyOS Next 应用元服务开发-分布式数据对象迁移数据权限与基础数据
分布式·华为·harmonyos
Damon小智9 小时前
HarmonyOS NEXT 技术实践-实现音乐服务卡片
华为·harmonyos·鸿蒙·harmonyos next·服务卡片
play_big_knife9 小时前
鸿蒙项目云捐助第十七讲云捐助我的页面上半部分的实现
华为·harmonyos·鸿蒙·云开发·鸿蒙开发·鸿蒙next·华为云开发
枫叶丹415 小时前
【HarmonyOS之旅】HarmonyOS开发基础知识(三)
华为od·华为·华为云·harmonyos
SoraLuna20 小时前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
AORO_BEIDOU1 天前
单北斗+鸿蒙系统+国产芯片,遨游防爆手机自主可控“三保险”
华为·智能手机·harmonyos