如何解决Grid组件中设置onGetIrregularSizeByIndex属性失效问题
============================================

#### 问题现象

在Grid组件中，通过设置onGetIrregularSizeByIndex属性实现第一个元素占据两行一列空间的效果，但是得到的结果却是只占据了一行一列。

问题代码示例参考如下：

@Entry
@Component
struct Index {
  @State numbers: String\[\] \= \['0', '1', '2'\];
  scroller: Scroller \= new Scroller();
  layoutOptions2: GridLayoutOptions \= {
    regularSize: \[1, 1\],
    irregularIndexes: \[0, 1, 2\],
    onGetIrregularSizeByIndex: (index: number) \=\> {
      if (index \=== 0) {
        return \[2, 2\];
      } else {
        return \[1, 2\]
      }
    }
  };

  build() {
    Column({ space: 5 }) {
      Grid(this.scroller, this.layoutOptions2) {
        ForEach(this.numbers, (item: string) \=\> {
          GridItem() {
            Text(item)
              .fontSize(16)
              .backgroundColor('#ACC6F6')
              .width('100%')
              .height(80)
              .borderRadius(15)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) \=\> item)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
      .width('95%')
      .height(170)
    }
    .width('100%')
  }
}

问题效果预览：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a3/v3/E-qPNkWeQCS0IMSQU4D35g/zh-cn_image_0000002658793545.png?HW-CC-KV=V1&HW-CC-Date=20260709T133909Z&HW-CC-Expire=86400&HW-CC-Sign=0CB88B5EDF81750BBA7807D4825AB3C3B307C7936F0AE46CB7E2BF80B4AD7358 "点击放大")

#### 效果预览

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/50/v3/y4Bo_6xwQOitCRJsbYQrXQ/zh-cn_image_0000002628554178.png?HW-CC-KV=V1&HW-CC-Date=20260709T133909Z&HW-CC-Expire=86400&HW-CC-Sign=46EFAC295A652EFBB6E413FE36890C68BD14A75DCC72A305E0CE1B9C62687B1C "点击放大")

#### 背景知识

*   [Grid](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid)：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
*   [GridLayoutOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid#gridlayoutoptions10对象说明)：Grid布局选项。其中的属性onGetIrregularSizeByIndex需要配合irregularIndexes使用，以此来设置不规则GridItem占用的行数和列数。

#### 问题定位

通过问题图可知第一个元素高度是一行的高度，查看代码onGetIrregularSizeByIndex的用法，以及GridItem的高度设置。

#### 分析结论

分析问题代码可知，onGetIrregularSizeByIndex设置方法没有问题。问题是由于GridItem中的Text组件的高度写成了固定的一行高度，所以展示的效果是一行一列。

#### 修改建议

可以通过三元运算符来设置Text组件的高度，当通过索引判断出是第一个元素时，将高度设置为100%，除此之外的元素高度不变，例如：height(index === 0 ? '100%' : 80)。

@Entry
@Component
struct GridHeight {
  @State numbers: String\[\] \= \['0', '1', '2'\];
  scroller: Scroller \= new Scroller();
  layoutOptions2: GridLayoutOptions \= {
    regularSize: \[1, 1\],
    irregularIndexes: \[0, 1, 2\],
    onGetIrregularSizeByIndex: (index: number) \=\> {
      if (index \=== 0) {
        return \[2, 2\];
      } else {
        return \[1, 2\];
      }
    }
  };

  build() {
    Column({ space: 0 }) {
      Grid(this.scroller, this.layoutOptions2) {
        ForEach(this.numbers, (item: string, index: number) \=\> {
          GridItem() {
            Text(item)
              .fontSize(16)
              .backgroundColor('#ACC6F6')
              .width('100%')
              .borderRadius(15)
              .height(index \=== 0 ? '100%' : 80) _// 给第一个元素设置高度为100%，即两列的高度_
              .textAlign(TextAlign.Center);
          };
        }, (item: string) \=\> item);
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
      .width('95%')
      .height(170);
    }
    .width('100%');
  }
}