openharmony容器组件之Grid

Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局

Grid()属性:

columnsTemplate:用于设置当前网格布局列的数量，不设置时默认1列 示例, ‘1fr 1fr 2fr’ 分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。 rowsTemplate:用于设置当前网格布局行的数量，不设置时默认1行 示例, 1fr 1fr 2fr’分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 columnsGap:用于设置列与列的间距。 rowsGap:用于设置行与行的间距。 以下属性SDK8拥有： editMode：是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部GridItem。 layoutDirection：设置布局的主轴方向，目前支持的主轴布局方向如下： LayoutDirection.Row：沿水平方向布局，即先填满一列，再去填下一列。 LayoutDirection.Column：沿垂直方向布局，即先填满一行，再去填下一行。 maxCount：当layoutDirection是Row时，表示可显示的最大行数，当layoutDirection是Column时，表示可显示的最大列数。 minCount：当layoutDirection是Row时，表示可显示的最小行数，当layoutDirection是Column时，表示可显示的最小列数。 cellLength：当layoutDirection是Row时，表示一行的高度，当layoutDirection是Column时，表示一列的宽度。 multiSelectable：是否开启鼠标框选，false：关闭框选，true：开启框选。 dragAnimation：是否开启拖拽GridItem动画。 edgeEffection：设置边缘滑动效果，目前支持的滑动效果EdgeEffect Spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 None：滑动到边缘后无效果。

效果如图：

代码：

@Entry
@Component
struct GridTest {
  @State Number: String[] = [0, 1, 2, 3, 4]

  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%)
      .editMode(true)
      .backgroundColor(0xFAEEE0)
      .height(300)

      Text(C_scroll).fontColor(0x000000).fontSize(9).width(90%)
      Grid() {
        ForEach(this.Number, (day) => {
          ForEach(this.Number, (day) => {
            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)


    }
    .width(100%)
    .height(100%)
  }
}