鸿蒙核心组件与进阶（2）一、网格布局Grid/GridItem 1.1固定行列基本属性名称参数类型描述 colu

一、网格布局Grid/GridItem

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

1.1固定行列

首先来看如何实现固定行列，不滚动。

宽高分为 2 种情况：

Grid组件设置了宽高属性，则其尺寸为设置值。

Grid组件没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。

基本属性

名称	参数类型	描述
columnsTemplate	string	设置当前网格布局列的数量,不设置默认1列,例如:'1fr 2fr 1fr',将父组件分成三列，分别占1份、2份、1份。注: 设置为'0fr'时,该列的列宽为0,不显示GridItem。
rowsTemplate	string	设置当前网格布局行的数量,不设置默认1行,例如:'1fr 2fr 1fr',将父组件分成三行，分别占1份、2份、1份。注: 设置为'0fr'时,该行的行宽为0,不显示GridItem。
columnsGap	Length	设置列与列的间距。默认值：0
rowsGap	Length	设置行与行的间距。默认值：0

@Entry
@Component
struct Index {
  //生成一个长度为20的空数组
  num: number [] = Array.from({ length: 20 })

  build() {
    Column() {
      Grid() {
        ForEach(this.num, (item: number, index: number) => {
          GridItem() {
            Text(index.toString())
          }
          .backgroundColor('#0094ff')
        })
      }
      .width('100%')
      .height(300)
      .columnsTemplate('1fr 2fr 1fr') //分成三列,中间一列占两份
      .rowsTemplate('1fr 2fr 1fr') //分成三行,中间一行占两份
      .columnsGap(10) //列间距
      .rowsGap(10) //行间距
    }
    .width('100%')
    .height('100%')
    .backgroundColor(Color.Gray) //枚举颜色：灰色
  }
}

合并行列

上面介绍了等比例网格布局，但实际应用中不均匀分布也很常见。要实现这个效果,通过GridItem的几个属性即可：


// 网格布局和builder封装以及利用Array.from生成一个序列[0,1,2,3,4,5,6,...]
@Entry
@Component
struct Index {
  @State flag: boolean = false
  numArr: number[] = Array.from({ length: 16 }, (v: undefined, i) => i)

  @Builder
  gridBuilder() {
    Grid() {
      ForEach(this.numArr, (item: number, index: number) => {
        this.gridItemBuilder(item, index)
      })
    }
    .width('100%')
    .height(320)
    .columnsTemplate('1fr 1fr 1fr 1fr') //均分四列
    .rowsTemplate('1fr 1fr 1fr 1fr') //均分四行
    .columnsGap(10) //列间距
    .rowsGap(10) //行间距
    .padding(10)
  }

  @Builder
  gridItemBuilder(num: number, index: number) {
    if (index === 3) {
      GridItem() {
        Text(num + '')
          .fontSize(30)
          .fontColor('#fff')
      }
      .backgroundColor('#9dc3e6')
      .rowStart(2) //合并行
      .rowEnd(3)
    } else if (index === 2) {
      GridItem() {
        Text(num + '')
          .fontSize(30)
          .fontColor('#fff')
      }
      .backgroundColor('#9dc3e6')
      .columnStart(3) //合并列
      .columnEnd(4)
    } else {
      GridItem() {
        Text(num + '')
          .fontSize(30)
          .fontColor('#fff')
      }
      .backgroundColor('#9dc3e6')
    }
  }

  build() {
    Column() {
      this.gridBuilder()
    }
    .width('100%')
    .height('100%')
  }
}

设置滚动

设置方式:

水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。

垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向

代码设置滚动（控制器）

和上一期提到的Swiper和Scroll一样，Grid也能用代码控制滚动

创建一个控制器对象
gridScroller: Scroller = new Scroller()

绑定给grid
Grid(this.gridScroller){}

调用控制器方法
this.gridScroller.scrollPage({ next: false })//上一页
this.gridScroller.scrollPage({ next: false })//下一页

自定义滚动条

当默认的滚动条外观无法满足我们的要求时,需要自定义滚动条。先来看属性

属性名	类型	说明
scrollBar	BarSate	设置滚动条状态。默认值BarState.auto 按需显示 BarState.off 关闭 BarState.on 常驻
scrollBarColor	string \| number \| Color	设置滚动条的颜色
scrollBarWidth	string \| number	设置滚动条的宽度。正常状态和按压状态宽度均为滚动条的宽度值。默认值：4vp

  .scrollBarWidth(20) // 宽度
  .scrollBarColor(Color.Orange) // 滚动颜色
  .scrollBar(BarState.Off) // 关闭

除属性外，还可以使用ScrollBar组件自定义注：要和 Grid 共用同一个 Scroller

@Entry
@Component
struct index {
  //创建一个控制器对象
  scroller: Scroller = new Scroller()
  //创建一个长度为30的空数组
  list: string[] = Array.from({ length: 30 })

  build() {
    Column() {
      //和Grid共用同一个Scroller
      Grid(this.scroller) {
        ForEach(this.list, (item: string, index) => {
          GridItem() {
            Text((index + 1).toString())
              .backgroundColor('#0094ff')
              .width('100%')
              .height('100%')
              .fontSize(30)
              .fontColor('#fff')//白色字体
              .textAlign(TextAlign.Center) //文本居中显示
          }
          .padding({ left: 5, right: 5 })
          .width('25%')
        })

      }
      .rowsTemplate('1fr 1fr 1fr') // 竖向滚动
      .rowsGap(10) //行间距
      .width('100%')
      .height(300)
      .padding(5)
      .scrollBar(BarState.Off) // 关闭

      //创建ScrollBar组件并设置属性
      ScrollBar({
        scroller: this.scroller,
        direction: ScrollBarDirection.Horizontal
      }) {
        //滚动内容 设置外观即可
        Text()
          .width(40)
          .height(10)
          .backgroundColor(Color.Red)
      }
    }
    .width('100%')
    .height('100%')
  }
}

本系列教程希望你能喜欢,我将会持续更新下去。如果你觉得教程通俗易懂且是你喜欢的风格，请多多点赞、关注！