固定行列（布局）
基本结构
Grid() {
GridItem(){
// 展示的内容放在这里
}
.属性
GridItem(){
// 展示的内容放在这里
}
.属性
}
属性
rowsTemplate:设置网格的行数，String类型，写法：.rowsTemplate('1fr 1fr')表示把网格空间分为两行，每行占1/2
columnsTemplate:设置网格的列数，String类型，写法：.columnsTemplate('1fr 1fr')表示把网格空间分为两列，每列占1/2
rowsGap:设置每行间隔，number类型
columnsGap:设置每行间隔，number类型
合并行列
属性
rowStart:起始行位置
rowEnd：结束行位置
columnStart:起始列位置
columnEnd：结束列位置
用法
@Entry
@Component
struct GridPage03 {
// 生成 12 个元素的数组
nums: number[] = Array.from({ length: 12 })
build() {
Grid() {
ForEach(this.nums, (item: number, index: number) => {
if (index==8){
GridItem() {
Text(index.toString())
.fontColor(Color.White)
.fontSize(30)
}
.columnStart(9) //起始列位置
.columnEnd(11) //结束列位置
.backgroundColor('#9dc3e6')
}else if (index==4) {
GridItem() {
Text(index.toString())
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
.rowStart(1) //起始行位置
.rowEnd(2) //结束行位置
}
else{
GridItem() {
Text(index.toString())
.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)
}
}
运行结果如下
实现滚动
核心
元素展示较多，溢出父容器时，可以只设置rowsTemplate实现水平滚动，相反想实现列滚动，只定义columnsTemplate
用法
@Entry
@Component
struct Day01_09_Grid05 {
// 长度为 10 每一项都为 undefined 的数组
list: string[] = Array.from({ length: 30 })
build() {
Column() {
Grid() {
ForEach(this.list, (item: string, index) => {
GridItem() {
Text((index + 1).toString())
.newExtend()
}
.padding(5)
.height('30%')
.width('25%')
})
}
.columnsTemplate('1fr 1fr 1fr') // 竖向滚动
// .rowsTemplate('1fr 1fr 1fr') // 横向滚动
.rowsGap(10)
.width('100%')
.height(300)
.border({ width: 1 })
.padding(5)
}
.width('100%')
.height('100%')
}
}
@Extend(Text)
function newExtend() {
.backgroundColor('#0094ff')
.width('100%')
.height('100%')
.fontSize(30)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
代码控制滚动
步骤：
1：new一个控制器
2：给Grid绑定控制器
3：注册点击事件调用方法
用法
// 创建 Scroller 对象
scroller: Scroller = new Scroller()
// 设置给 Grid
Grid(this.scroller) {
// ...
}
// 通过代码控制
this.scroller.scrollPage({
next:true // 下一页
next:false // 上一页
})
自定义滚动条
使用属性自定义
| 属性名 | 类型 | 说明 |
|---|---|---|
| scrollBar | BarState | 设置滚动条状态。默认值：BarState.autoBarState.off 关闭BarState.on 常驻BarState.auto 按需显示 |
| scrollBarColor | string | 设置滚动条的颜色。 |
| scrollBarWidth | number | 设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。默认值：4单位：vp |
使用 ScrollBar 组件自定义
核心步骤:
- 和 Grid 共用同一个 Scroller
- 创建 ScrollBar 组件并设置属性
| 参数名 | 参数类型 | 必填 | 参数描述 |
|---|---|---|---|
| scroller | Scroller | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| direction | ScrollBarDirection | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。默认值：ScrollBarDirection.Vertical |
| state | BarState | 否 | 滚动条状态。默认值：BarState.Auto |
| 用法 |
// 和 Grid 共用同一个 Scroller
scroller: Scroller = new Scroller()
// 和 Grid 共用同一个 Scroller
Grid(this.scroller){
// 略
}
// 和 Grid 共用同一个 Scroller
// 创建 ScrollBar 组件并设置属性
ScrollBar({
scroller: this.scroller,
direction: ScrollBarDirection.Horizontal // 方向
}) {
// 滚动内容 设置外观即可
Text()
}
// 设置外观
试一试：
- 禁用默认的 scrollBar ***
- 使用ScrollBar组件进行自定义
@Entry
@Component
struct Day01_11_Grid07 {
// 长度为 30 每一项都为 undefined 的数组
list: string[] = Array.from({ length: 30 })
scroller: Scroller = new Scroller()
build() {
Column() {
Grid(this.scroller) {
ForEach(this.list, (item: string, index) => {
GridItem() {
this.ItemBuilder(index)
}
.padding(5)
.height('30%')
.width('25%')
})
}
.rowsTemplate('1fr 1fr 1fr') // 竖向滚动
.rowsGap(10)
.width('100%')
.height(300)
.border({ width: 1 })
.padding(5)
.scrollBar(BarState.Off) // 关闭
// 自定义滚动条
ScrollBar({
scroller: this.scroller,
direction: ScrollBarDirection.Horizontal
}) {
Text()
.width(40)
.height(20)
.backgroundColor(Color.Orange)
}
.width(200)
.height(20)
.backgroundColor(Color.Red)
}
.width('100%')
.height('100%')
}
@Builder
ItemBuilder(index: number) {
Text((index + 1).toString())
.backgroundColor('#0094ff')
.width('100%')
.height('100%')
.fontSize(30)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
}
每日小技巧
小技巧：如何快速生成特定长度的数组
list: string[] = Array.from({ length: 30 })
希望数组多长，length 设置为多少即可，但是每一项都为 undefined 的数组，可用索引解决问题
