HarmonyOS Grid占用行和列的问题?

在使用Grid不能够在列上面占用指定大小

阅读 441
1 个回答

GridItem设置多行单列的时候默认是不拉伸的,只会保持原有节点的高度,不过可以尝试给需要占多行的元素设置一个高度,示例如下:

@Entry
@Component
struct GridExample {
  @State numbers: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23']

  layoutOptions2: GridLayoutOptions = {
    regularSize: [1, 1],
    irregularIndexes: [0, 7],   // 索引为0和7的GridItem占用的列数由onGetIrregularSizeByIndex指定
    onGetIrregularSizeByIndex: (index: number) => {
      if (index === 0) {
        return [1, 5]
      } else if(index == 7) {
        return [3,1]
      }
      return [1, 1]
    }
  }

  build() {
    Column({ space: 5 }) {
      Grid(null, this.layoutOptions2) {
        ForEach(this.numbers, (day: string) => {
          GridItem() {
            Text(day)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width('100%')
              .textAlign(TextAlign.Center)
                // 目前只能通过给单个元素设置高度进行拉升
              .height(day === '7' ? 92 : 24)
          }
        }, (day: string) => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
      .width('100%')
      .backgroundColor(0xFAEEE0)
      .height('100%')
    }.width('100%').padding(12)
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进