鸿蒙~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老皮!!!欢迎大家来找我探讨交流👀

相关推荐
祥睿夫子7 小时前
ArkTS 未被深挖的核心点:静态多态限制、静态成员与单例实战
harmonyos
高心星9 小时前
HarmonyOS 5.0应用开发——V2装饰器@local的使用
harmonyos
HarmonyOS_SDK9 小时前
【FAQ】应用A如何使用应用B内的文件?
harmonyos
万少9 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
流影ng9 小时前
【HarmonyOS】MVVM与三层架构
华为·架构·harmonyos
爱笑的眼睛119 小时前
HarmonyOS Stage 模型与 ArkUI 声明式开发深度实践:构建高效稳定的应用
华为·harmonyos
鸿蒙小白龙9 小时前
鸿蒙应用之网络请求方案总结
harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者9 小时前
鸿蒙Next ArkWeb网页文件上传与下载完全指南
华为·harmonyos
低调小一9 小时前
「2025最新」HarmonyOS 5.1 HelloWorld项目深度解析:从零到一完整开发指南
华为·harmonyos
咏方舟【长江支流】9 小时前
AI+华为HarmonyOS开发工具DevEco Studio详细安装指南
人工智能·华为·移动开发·harmonyos·arkts·deveco studio·长江支流