作用：如果布局是由 很多的 行 和 列 所组成、行列可能需要合并、甚至滚动，就可以使用网格布局来实现。
- 固定行列数量（不滚动）
- 合并行列（不滚动）
- 设置滚动
- 代码控制滚动
- 自定义滚动条
1.固定行列
实现这种固定的行列，不能进行滚动
语法：
Grid() {
GridItem(){
// 展示的内容放在这里
}
GridItem(){
// 展示的内容放在这里
}
}
注意：
1.Grid的子组件必须是GridItem组件，而且需要展示的内容写在GridItem组件的内部即可，GridItem 只能有一个子组件
2.如果Grid组件设置了宽高属性，则它的尺寸为设置值；如果Grid组件没有设置宽高属性，则默认适应它的父组件的尺寸。
1.1基本属性
设置在Grid上面的属性有：
- columnsTemplate列上面的几等分
- rowsTemplate行上面的几等分 上面两个的参数的类型的string
- columnsGap列间距
- rowsGap行间距
@Entry
@Component
struct Index {
//这里运用了@Builder来进行对 GridItem的封装
@Builder gridItemBuilder(text:string){
GridItem(){
Text(text)
}
.backgroundColor('#0094ff')
}
build() {
Column(){
Grid(){
this.gridItemBuilder('1')
this.gridItemBuilder('2')
this.gridItemBuilder('3')
this.gridItemBuilder('4')
this.gridItemBuilder('5')
this.gridItemBuilder('6')
this.gridItemBuilder('7')
this.gridItemBuilder('8')
this.gridItemBuilder('9')
}
.width('100%')
.height(300)
.backgroundColor(Color.Gray)
// 1. columnsTemplate+rowsTemplate可以固定几行几列来显示
.columnsTemplate('1fr 1fr 1fr')//表示三列
.rowsTemplate('1fr 1fr 1fr')//表示三行
.columnsGap(5)//列距
.rowsGap(5)//行距
}
.width('100%')
.height('100%')
}
}
注意：这里columnsTemplate + rowsTemplate可以固定几行几列来显示。如果少了其中一个就会可能变成一个可以滑动的宫格
2.合并行列
如果要实现合并的效果，则需要在GridItem上面设置以下属性：
举例：
合并第2列和第3列，然后在合并第2行和第3行
@Entry
@Component
struct GridPage03 {
//技巧：这里是快速生成十二个数据的方法
nums: number[] = Array.from({ length: 12 })
build() {
Grid() {
//对他进行遍历生成一个四列三行的宫格
ForEach(this.nums, (item: number, index: number) => {
//这个如果它的index索引号等于2的时候，
//因为这里是从0开始的，
//所以显示多少就从那一个数字开始列合并
//就设置它的.columnStart(3).columnEnd(4)
//columnStart是设置它的列，
//其中里面的数字就不能像索引那样数，
//应该从0是1开始数，所以在显示2的地方就是3
if (index === 2) {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
//其中里面的数字就不能像索引那样数，
//应该从0是1开始往列数，所以在显示2的地方就是3
.columnStart(3)
.columnEnd(4)
} else if (index === 3) {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
//这里是跨行合并，更上同理
//这里注意在合并列过后索引值原来的位置会发生变化
//.rowStart(2)括号里面的数字要变成从进行行数了，不要在进行列数，合并第2行和第3行
.rowStart(2)
.rowEnd(3)
} else {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
}
})
}
//这里是设置在Gird上面的属性
.columnsTemplate('1fr 1fr 1fr 1fr')//四列
.rowsTemplate('1fr 1fr 1fr')//三行
.width('100%')
.height(260)
.rowsGap(10)//行距
.columnsGap(10)//列距
.padding(10)
}
}
结果：
3.设置其滚动
在日常开发中，会遇到会滚动的网络布局，比如这种：
设置方式：
- 水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。
- 垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向
比如： 要一个三列的滚动网格，就在Grid上面设置 ：
.columnsTemplate('1fr 1fr 1fr') // 竖向滚动
如果要一个三行的滚动网格，就在Grid上面设置：
.rowsTemplate('1fr 1fr 1fr') // 横向滚动
注意：要实现对应的滚动效果，这两个属性只能设置其中一个，不然就会变成一个固定的几行几列，而且如果内容太多，单个的小网格还会显示不完整
4.用代码实现其滚动设置其滚动
如图效果：
步骤：
- 创建 Scroller 对象
- 设置给 Grid
- 调用 Scroller 对象的 scrollPage 方法
// 1.创建 Scroller 对象
scroller: Scroller = new Scroller()
// 2.设置给 Grid
Grid(this.scroller) {
// ...
}
// 3.通过代码控制:next为true为点击下一页，
为false则为点击下一页
this.scroller.scrollPage({
next:true // 下一页
next:false // 上一页
})
5.自定义滚动条
如果默认的滚动条外观满足不了要求，则可以进行自定义。
自定义有两种方法：
- 使用提供的属性调整（可调整属性有限）
- 使用 ScrollBar 组件自定义（可定制性高）
5.1使用属性调整
如果需求只是调整颜色和宽度，或者是关闭滚动条就使用这三个属性在Grid上面进行.出来即可
5.2使用ScrollBar组件自定义
在上面已经介绍了如何用代码控制滚动
核心步骤：
- 和 Grid 共用同一个 Scroller
- 创建 ScrollBar 组件并设置属性
注意：记得提前关闭自带的
scrollBar(BarState.Off) // 关闭
//1.创建一个Scroller
scroller: Scroller = new Scroller()
// 和 Grid 共用同一个 Scroller
Grid(this.scroller){
// 略
}
// 和 Grid 共用同一个 Scroller
// 创建 ScrollBar 组件并设置属性，这里的ScrollBar是一个容器了，不再是Grid上面的一个属性
ScrollBar({
scroller: this.scroller,
direction: ScrollBarDirection.Horizontal // 滚动方向
}) {
// 滚动内容 设置外观即可
Text()
}
// 设置外观
举例：设置如图效果
部分代码：
// 自定义滚动条
ScrollBar({
//这里scroller必须更Grid绑定的相同
scroller: this.scroller,
//水平滚动
direction: ScrollBarDirection.Horizontal
}) {
//这里的Text也可以换成Row和Column等相关组件,该部分是橘色的选中时的外观
Text()
.width(40)
.height(20)
.backgroundColor(Color.Orange)
}
//这里是整个滚动条的外观
.width(200)
.height(20)
.backgroundColor(Color.Red)
