程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java、嵌入式、鸿蒙、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！
网格布局 Grid
1.Grid
如果布局是由 很多的 行 和 列 所组成、行列可能需要合并、甚至滚动，就可以使用网格布局来实现
因为网格布局可以实现很多种不同的效果：
- 固定行列数量（不滚动）
- 合并行列（不滚动）
- 设置滚动
- 代码控制滚动
- 自定义滚动条
2.固定行列
首先来看看如何实现固定行列、不滚动
- Grid的子组件必须是GridItem组件，需要展示的内容设置在 GridItem 内部既可
- GridItem 只能有一个子组件
- 宽高分为 2 种情况：
- a. Grid组件设置了宽高属性: 则其尺寸为设置值。
- b. Grid组件没有设置宽高属性: Grid组件的尺寸默认继承y其父组件的尺寸。
我们实现一个：
- 容器宽高：100%、300
- 行列占比如下：
@Entry
@Component
struct Index {
build() {
Column() {
Text('程序员Feri')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid() {
GridItem() {
Text('1')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor(Color.Blue)
GridItem() {
Text('2')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor(Color.Blue)
GridItem() {
Text('3')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor(Color.Blue)
GridItem() {
Text('4')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor(Color.Blue)
GridItem() {
Text('5')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor(Color.Blue)
GridItem() {
Text('6')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor(Color.Blue)
}
.border({ width: 1 })
.columnsTemplate('1fr 2fr 1fr')
.rowsTemplate('1fr 1fr')
.width('100%')
.height(360)
.columnsGap(10)
.rowsGap(10)
}
.width('100%')
.height('100%')
}
}
3.合并行列
接下来看看如何合并行列，不滚动
日常开发中除了大小相同的等比例网格布局，由不同大小的网格组成不均匀分布的网格布局场景在实际应用中也十分常见，如下图所示。
如果要实现这个效果 通过 GridItem 的如下属性即可:
@Entry
@Component
struct Index {
// 快速生成 12 个元素的数组
// Array.from 是 Array 这个类上面的静态方法
// {length:12} 是一个对象，有 length 属性，值为 12
nums: number[] = Array.from({ length: 12 })
build() {
Column() {
Text('Grid的合并行列')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid() {
ForEach(this.nums, (item: number, index: number) => {
if (index === 2) {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
.columnStart(3)
.columnEnd(4)
} else if (index === 3) {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
.rowStart(2)
.rowEnd(3)
} else {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
}
})
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr')
.width('100%')
.height(260)
.rowsGap(10)
.columnsGap(10)
.padding(10)
}
.width('100%')
.height('100%')
}
}
4.设置滚动
日常开发中，可以滚动的网格布局也经常出现，比如文件管理、购物、视频列表等
设置方式:
- 水平滚动：设置的是rowsTemplate，Grid的滚动方向为水平方向。
- 垂直滚动：设置的是columnsTemplate，Grid的滚动方向为垂直方向
// 为 Text 扩展属性 newExtend
// newExtend 设置了一些Text 组件的属性
@Extend(Text)
function newExtend() {
.width('100%')
.height('100%')
.fontSize(30)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
@Entry
@Component
struct Index {
// 长度为 10 每一项都为 undefined 的数组
list: string[] = Array.from({ length: 30 })
build() {
Column() {
Text('Grid的滚动效果')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid() {
ForEach(this.list, (item: string, index) => {
GridItem() {
Text((index + 1).toString())
.newExtend()
}
.padding(5)
.backgroundColor('#0094ff')
.height('25%') // 竖向滚动-通过 height 设置高度
.width('25%') // 横向滚动 通过 width 设置宽度
})
}
.columnsTemplate('1fr 1fr 1fr') // 竖向滚动 固定列数
.rowsGap(10)
.columnsGap(10)
.width('100%')
.height(300)
.border({ width: 1 })
.padding(5)
}
.width('100%')
.height('100%')
}
}
5.控制器对象-自定义滚动条
如果默认的滚动条外观无法满足要求，我们还可以自定义滚动条
核心步骤：
- 隐藏默认滚动条
- 使用ScrollBar组件自定义滚动条
- a. ScrollBar 和 Grid 设置同一个 Scroller（控制器对象）
- b. 通过 参数 和 属性控制 ScrollBar
第一步：通过 Grid 的 scrollBar 属性关闭滚动条，具体的属性和取值如下所示：
第二步：使用ScrollBar组件自定义滚动条
完整代码如下所示：
// 为 Text 扩展属性 newExtend
// newExtend 设置了一些Text 组件的属性
@Extend(Text)
function newExtend() {
.width('100%')
.height('100%')
.fontSize(30)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
@Entry
@Component
struct Index {
// 长度为 10 每一项都为 undefined 的数组
list: string[] = Array.from({ length: 30 })
scroller:Scroller =new Scroller()
build() {
Column() {
Text('Grid的滚动效果')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid(this.scroller) {
ForEach(this.list,
(item: string, index) => {
GridItem() {
Text((index + 1)+'')
.newExtend()
}
.padding(5)
.backgroundColor('#0094ff')
.height('25%') // 竖向滚动-通过 height 设置高度
.width('25%') // 横向滚动 通过 width 设置宽度
})
}
.rowsTemplate('1fr 1fr 1fr') // 横向滚动 固定列数
.rowsGap(10)
.width('100%')
.height(300)
.border({ width: 1 })
.padding(5)
.scrollBar(BarState.Off)//关闭 滚动条
// 自定义滚动条
ScrollBar({
scroller: this.scroller,// 和 Grid 同一个控制器对象
direction: ScrollBarDirection.Horizontal,
}) {
Text()
.width(40)
.height(20)
.backgroundColor(Color.Orange)
}
.width(200)
.height(20)
.backgroundColor(Color.Red)
}
.width('100%')
.height('100%')
}
}
好啦，本篇关于Grid网格就说到这里啦，关注我，跟着我一起起飞！
