網(wǎng)格容器

子組件

包含GridItem子組件。

接口

Grid(scroller?: Scroller)

參數(shù)：

屬性

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

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

1. rowsTemplate、columnsTemplate同時設(shè)置：
   • Grid只展示固定行列數(shù)的元素，其余元素不展示，且Grid不可滾動。
   • 此模式下以下屬性不生效：layoutDirection、maxCount、minCount、cellLength。
   • Grid的寬高沒有設(shè)置時，默認適應(yīng)父組件尺寸。
   • Gird網(wǎng)格列大小按照Gird自身內(nèi)容區(qū)域大小減去所有行列Gap后按各個行列所占比重分配。
   • GridItem默認填滿網(wǎng)格大小。
2. rowsTemplate、columnsTemplate僅設(shè)置其中的一個：
   • 元素按照設(shè)置的方向進行排布，超出Grid顯示區(qū)域后，Grid可通過滾動的方式展示。
   • 如果設(shè)置了columnsTemplate，Gird滾動方向為垂直方向，主軸方向為垂直方向，交叉軸方向為水平方向。
   • 如果設(shè)置了rowsTemplate，Gird滾動方向為水平方向，主軸方向為水平方向，交叉軸方向為垂直方向。
   • 此模式下以下屬性不生效：layoutDirection、maxCount、minCount、cellLength。
   • 網(wǎng)格交叉軸方向尺寸根據(jù)Gird自身內(nèi)容區(qū)域交叉軸尺寸減去交叉軸方向所有Gap后按所占比重分配。
   • 網(wǎng)格主軸方向尺寸取當(dāng)前網(wǎng)格交叉軸方向所有GridItem高度最大值。
3. rowsTemplate、columnsTemplate都不設(shè)置：
   • 元素在layoutDirection方向上排布，列數(shù)由Grid的寬度、首個元素的寬度、minCount、maxCount、columnsGap共同決定。
   • 行數(shù)由Grid高度、首個元素高度、cellLength、rowsGap共同決定。超出行列容納范圍的元素不顯示，也不能通過滾動進行展示。
   • 此模式下僅生效以下屬性：layoutDirection、maxCount、minCount、cellLength、editMode、columnsGap、rowsGap。
   • 當(dāng)前l(fā)ayoutDirection設(shè)置為Row時，先從左到右排列，排滿一行再排一下一列。剩余高度不足時不再布局，整體內(nèi)容頂部居中。
   • 當(dāng)前l(fā)ayoutDirection設(shè)置為Column時，先從上到下排列，排滿一列再排一下一列，剩余寬度度不足時不再。整體內(nèi)容頂部居中。

GridDirection8+枚舉說明

事件

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

ItemDragInfo對象說明

示例

示例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 => day)
        }, day => 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 => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('90%')
      .backgroundColor(0xFAEEE0)
      .height(300)
      Button('next page')
        .onClick(() => { // 點擊后滑到下一頁
          this.scroller.scrollPage({ next: true })
        })
    }.width('100%').margin({ top: 5 })
  }
}

示例2

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

@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) { //交換數(shù)組中的位置
    const temp = this.numbers[index1];
    if (index1 > index2) {
      this.numbers.splice(index2, 0, temp);
      this.numbers.splice(index1 + 1, 1);
    } else {
      this.numbers.splice(index2 + 1, 0, temp);
      this.numbers.splice(index1, 1);
    }
  }

  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) //設(shè)置Grid是否進入編輯模式，進入編輯模式可以拖拽Grid組件內(nèi)部GridItem
      .supportAnimation(true) //設(shè)置Grid是否開啟拖拽補位動畫
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { //第一次拖拽此事件綁定的組件時，觸發(fā)回調(diào)。
        this.text = this.numbers[itemIndex]
        return this.pixelMapBuilder() //設(shè)置拖拽過程中顯示的圖片。
      })
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { //綁定此事件的組件可作為拖拽釋放目標，當(dāng)在本組件范圍內(nèi)停止拖拽行為時，觸發(fā)回調(diào)。
        // isSuccess=false時，說明drop的位置在grid外部；insertIndex > length時，說明有新增元素的事件發(fā)生
        if (!isSuccess || insertIndex >= this.numbers.length) {
          return
        }
        console.info('beixiang' + itemIndex + '', insertIndex + '') //itemIndex拖拽起始位置，insertIndex拖拽插入位置
        this.changeIndex(itemIndex, insertIndex)
      })
    }.width('100%').margin({ top: 5 })
  }
}