openharmony容器组件之GridItem

GridItem：网格容器中单项内容容器
GridItem()属性：
rowStart：用于指定当前元素起始行号。
rowEnd：用于指定当前元素终点行号。
columnStart：用于指定当前元素起始列号。
columnEnd：用于指定当前元素终点列号。
forceRebuild：用于设置在触发组件build时是否重新创建此节点
selectable：（SDK8）当前GridItem元素是否可以被鼠标框选（外层Grid容器的鼠标框选开启时，GridItem的框选才生效）
事件：
onSelect(callback: (isSelected: boolean) => any)
    GridItem元素被鼠标框选的状态改变时触发回调（SDk8）
    isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false

效果如图：

代码：

@Entry
@Component
struct GridItemT {
  @State numbers: string[] = Array.apply(null, Array(16)).map(function (item, i) {
    return i.toString()
  })
 
  build() {
    Column() {
      Grid() {
        GridItem() {
          Text('4')
            .fontSize(16)
            .backgroundColor(0xfaeee0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.rowStart(1).rowEnd(4)
 
        ForEach(this.numbers, (item) => {
          GridItem() {
            Text(item)
              .fontSize(16)
              .backgroundColor(0xF9CF93)
              .width('100%')
              .height('100%')
              .textAlign(TextAlign.Center)
          }.forceRebuild(false)
        }, item => item)
        GridItem() {
          Text('5')
            .fontSize(16)
            .backgroundColor(0xDBD0C0)
            .width('100%')
            .height('100%')
            .textAlign(TextAlign.Center)
        }.columnStart(1).columnEnd(5)
      }.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
      .width('90%').height(300)
    }
    .width('100%')
    .height('100%')
    .margin({ top: 5 })
  }
}