Grid

網格容器，由“行”和“列”分割的單元格所組成，通過指定“項目”所在的單元格做出各種各樣的布局。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

僅支持[GridItem]子組件。

說明：

Grid子組件的索引值計算規則：

按子組件的順序依次遞增。

if/else語句中，只有條件成立分支內的子組件會參與索引值計算，條件不成立分支內的子組件不計算索引值。

ForEach/LazyForEach語句中，會計算展開所有子節點索引值。

[if/else]、[ForEach]和[LazyForEach]發生變化以后，會更新子節點索引值。

Grid子組件的visibility屬性設置為Hidden或None時依然會計算索引值。

Grid子組件的visibility屬性設置為None時不顯示，但依然會占用子組件對應的網格。

Grid子組件設置position屬性，會占用子組件對應的網格，子組件將顯示在相對Grid左上角偏移position的位置。該子組件不會隨其對應網格滾動，在對應網格滑出Grid顯示范圍外后不顯示。

接口

Grid(scroller?: Scroller, layoutOptions?: GridLayoutOptions)

參數：

GridLayoutOptions10+

布局選項，配合rowsTemplate、columnsTemplate僅設置其中一個的Grid使用，可以替代通過columnStart/columnEnd控制GridItem占用多列、rowStart/rowEnd控制GridItem占用多行的場景。

參數：

屬性

除支持[通用屬性]外，還支持以下屬性：

Grid組件根據rowsTemplate、columnsTemplate屬性的設置情況，可分為以下三種布局模式：

1、rowsTemplate、columnsTemplate同時設置：

• Grid只展示固定行列數的元素，其余元素不展示，且Grid不可滾動。
• 此模式下以下屬性不生效：layoutDirection、maxCount、minCount、cellLength。
• Grid的寬高沒有設置時，默認適應父組件尺寸。
• Gird網格列大小按照Gird自身內容區域大小減去所有行列Gap后按各個行列所占比重分配。
• GridItem默認填滿網格大小。

2、rowsTemplate、columnsTemplate僅設置其中的一個：

• 元素按照設置的方向進行排布，超出Grid顯示區域后，Grid可通過滾動的方式展示。
• 如果設置了columnsTemplate，Gird滾動方向為垂直方向，主軸方向為垂直方向，交叉軸方向為水平方向。
• 如果設置了rowsTemplate，Gird滾動方向為水平方向，主軸方向為水平方向，交叉軸方向為垂直方向。
• 此模式下以下屬性不生效：layoutDirection、maxCount、minCount、cellLength。
• 網格交叉軸方向尺寸根據Gird自身內容區域交叉軸尺寸減去交叉軸方向所有Gap后按所占比重分配。
• 網格主軸方向尺寸取當前網格交叉軸方向所有GridItem高度最大值。

3、rowsTemplate、columnsTemplate都不設置：

• 元素在layoutDirection方向上排布，列數由Grid的寬度、首個元素的寬度、minCount、maxCount、columnsGap共同決定。
• 行數由Grid高度、首個元素高度、cellLength、rowsGap共同決定。超出行列容納范圍的元素不顯示，也不能通過滾動進行展示。
• 此模式下僅生效以下屬性：layoutDirection、maxCount、minCount、cellLength、editMode、columnsGap、rowsGap。
• 當前layoutDirection設置為Row時，先從左到右排列，排滿一行再排一下一列。剩余高度不足時不再布局，整體內容頂部居中。
• 當前layoutDirection設置為Column時，先從上到下排列，排滿一列再排一下一列，剩余寬度度不足時不再。整體內容頂部居中。

GridDirection8+枚舉說明

說明：

Grid組件[通用屬性clip]的默認值為true。

事件

除支持[通用事件]外，還支持以下事件：

ItemDragInfo對象說明

ComputedBarAttribute對象說明

示例

示例1

// xxx.ets
@Entry
@Component
struct GridExample {
  @State Number: String[] = ['0', '1', '2', '3', '4']
  scroller: Scroller = new Scroller()

  build() {
    Column({ space: 5 }) {
      Grid() {
        ForEach(this.Number, (day: string) = > {
          ForEach(this.Number, (day: string) = > {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
            }
          }, (day: string) = > day)
        }, (day: string) = > day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)

      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid(this.scroller) {
        ForEach(this.Number, (day: string) = > {
          ForEach(this.Number, (day: string) = > {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, (day: string) = > day)
        }, (day: string) = > day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .friction(0.6)
      .edgeEffect(EdgeEffect.Spring)
      .scrollBar(BarState.On)
      .onScrollIndex((first: number) = > {
        console.info(first.toString())
      })
      .onScrollBarUpdate((index: number, offset: number) = > {
        return {totalOffset: (index / 5) * (80 + 10) - offset, totalLength: 80 * 5 + 10 * 4}
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
      Button('next page')
        .onClick(() = > { // 點擊后滑到下一頁
          this.scroller.scrollPage({ next: true })
        })
    }.width('100%').margin({ top: 5 })
  }
}

示例2

1. 設置屬性editMode(true)設置Grid是否進入編輯模式，進入編輯模式可以拖拽Grid組件內部GridItem。
2. 在[onItemDragStart]回調中設置拖拽過程中顯示的圖片。
3. 在[onItemDrop]中獲取拖拽起始位置，和拖拽插入位置，在[onDrag]回調中完成交換數組位置邏輯。

@Entry
@Component
struct GridExample {
  @State numbers: string[] = []
  scroller: Scroller = new Scroller()
  @State text: string = 'drag'

  @Builder pixelMapBuilder() { //拖拽過程樣式
    Column() {
      Text(this.text)
        .fontSize(16)
        .backgroundColor(0xF9CF93)
        .width(80)
        .height(80)
        .textAlign(TextAlign.Center)
    }
  }

  aboutToAppear() {
    for (let i = 1;i <= 15; i++) {
      this.numbers.push(i + '')
    }
  }

  changeIndex(index1: number, index2: number) { //交換數組位置
    let temp: string;
    temp = this.numbers[index1];
    this.numbers[index1] = this.numbers[index2];
    this.numbers[index2] = temp;
  }

  build() {
    Column({ space: 5 }) {
      Grid(this.scroller) {
        ForEach(this.numbers, (day: string) = > {
          GridItem() {
            Text(day)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width(80)
              .height(80)
              .textAlign(TextAlign.Center)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) = > {
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
      .editMode(true) //設置Grid是否進入編輯模式，進入編輯模式可以拖拽Grid組件內部GridItem
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) = > { //第一次拖拽此事件綁定的組件時，觸發回調。
        this.text = this.numbers[itemIndex]
        return this.pixelMapBuilder() //設置拖拽過程中顯示的圖片。
      })
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) = > { //綁定此事件的組件可作為拖拽釋放目標，當在本組件范圍內停止拖拽行為時，觸發回調。
        // isSuccess=false時，說明drop的位置在grid外部；insertIndex > length時，說明有新增元素的事件發生
        if (!isSuccess || insertIndex >= this.numbers.length) {
          return
        }
        console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
        this.changeIndex(itemIndex, insertIndex)
      })
    }.width('100%').margin({ top: 5 })
  }
}

示例圖：

網格子組件開始拖拽：

網格子組件拖拽過程中：

網格子組件1與子組件6拖拽交換位置后：

示例3

使用GridLayoutOptions

// xxx.ets
@Entry
@Component
struct GridExample {
  @State Number: String[] = ['0', '1', '2', '3', '4']
  scroller: Scroller = new Scroller()
  layoutOptions1: GridLayoutOptions = {
    regularSize: [1, 1],        // 只支持[1, 1]
    irregularIndexes: [0, 6],   // 索引為0和6的GridItem占用一行
  }

  layoutOptions2: GridLayoutOptions = {
    regularSize: [1, 1],
    irregularIndexes: [0, 7],   // 索引為0和7的GridItem占用的列數由onGetIrregularSizeByIndex指定
    onGetIrregularSizeByIndex: (index: number) = > {
      if (index === 0) {
        return [1, 5]
      }
      return [1, index % 6 + 1]
    }
  }

  build() {
    Column({ space: 5 }) {
      Grid(this.scroller, this.layoutOptions1) {
        ForEach(this.Number, (day: string) = > {
          ForEach(this.Number, (day: string) = > {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, (day: string) = > day)
        }, (day: string) = > day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)

      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      // 不使用scroll，需要undefined占位
      Grid(undefined, this.layoutOptions2) {
        ForEach(this.Number, (day: string) = > {
          ForEach(this.Number, (day: string) = > {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, (day: string) = > day)
        }, (day: string) = > day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
    }.width('100%').margin({ top: 5 })
  }
}

審核編輯 黃宇