鸿蒙~ArkUI 基础 Grid网格布局

大模型微调部署

已于 2024-01-11 21:58:07 修改

阅读量1.4k

点赞数 10

文章标签： harmonyos 华为

于 2023-12-27 22:19:10 首次发布

本文链接：https://blog.csdn.net/star_nwe/article/details/135257162

版权

本文介绍了如何在鸿蒙开发中使用Grid组件设置行列数量、占比、子组件排列、主轴方向和间距，以及推荐参考华为官方资源进行学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、设置排列方式

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

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

@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可以实现如图所示的单个网格横跨多行或多列的场景。

@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属性来约束主轴方向上的网格数量

layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。
仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。
仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。