Grid
Grid
如果布局是由 很多的 行 和 列 所组成、行列可能需要合并、甚至滚动,就可以使用网格布局来实现
1. 固定行列
- 子组件必须是
GridItem
组件,需要展示的内容设置在GridItem
内部既可 GridItem
只能有一个子组件
Grid() {
GridItem(){
// 展示的内容放在这里
}
GridItem(){
// 展示的内容放在这里
}
}
.columnsTemplate('。。。')
.rowsTemplate('。。。。')
名称 | 参数类型 | 描述 |
---|---|---|
columnsTemplate | string | 设置当前网格布局列的数量或最小列宽值,不设置时默认1列。例如, ‘1fr 1fr 2fr’ 是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。 |
rowsTemplate | string | 设置当前网格布局行的数量或最小行高值,不设置时默认1行。例如, ‘1fr 1fr 2fr’是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。 |
columnsGap | Length | 设置列与列的间距。默认值:0 |
rowsGap | Length | 设置行与行的间距。默认值:0 |
// 掌握: Grid是一个容器组件, 可以布局网格
// 语法: Grid 包住 GridItem , GirdItem只能有一个子组件
@Entry
@Component
struct Index {
build() {
Grid() {
ForEach(Array.from({ length: 7 }), (item: null, index: number) => {
GridItem() {
Text((index + 1).toString())
}
.backgroundColor(Color.Pink)
})
}
.columnsTemplate('1fr 2fr 1fr')
.rowsTemplate('1fr 1fr ') //行列数量一起确定后,只能显示行乘列的数量(6),多的数据会被丢弃
.columnsGap(10) // 列与列的间距
.rowsGap(10) // 行与行的间距
// .height(300)
// .width('100%')
}
}
2. 合并行列
行列号从0下标开始
名称 | 参数类型 | 描述 |
---|---|---|
rowStart | number | 指定当前元素起始行号。 |
rowEnd | number | 指定当前元素终点行号。 |
columnStart | number | 指定当前元素起始列号。 |
columnEnd | number | 指定当前元素终点列号。 |
》》》
@Entry
@Component
struct Page10_Grid_Merge {
// 快速生成 12 个元素的数组
// Array.from 是 Array 这个类上面的静态方法
// {length:12} 是一个对象,有 length 属性,值为 12
nums: number[] = Array.from({ length: 12 })
build() {
Column() {
Text('合并行列')
.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(2)
.columnEnd(3)
} else if (index === 3) {
GridItem() {
Text(index + '')
.fontColor(Color.White)
.fontSize(30)
}
.backgroundColor('#9dc3e6')
.rowStart(1)
.rowEnd(2)
} 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%')
}
}
3. 设置滚动
设置方式:
- 水平滚动:设置的是rowsTemplate,Grid的滚动方向为水平方向。
- 垂直滚动:设置的是columnsTemplate,Grid的滚动方向为垂直方向
1. rowsTemplate 或者columnTemplate 只写一个
2. 让子组件的高度或者宽度之和, 超过父组件Grid
// 💥1. rowsTemplate 或者columnTemplate 只写一个
// 💥2. 让子组件的高度或者宽度之和, 超过父组件Grid
@Extend(Text)
function xxx() {
.height('100%')
.fontSize(30)
.fontColor(Color.White)
.textAlign(TextAlign.Center)
}
@Entry
@Component
struct Page11_Grid_Scroll {
list: string[] = Array.from({ length: 30 })
build() {
Column() {
// 横向滚动 只写rowsTemplate
Grid() {
ForEach(this.list, (item: string, index) => {
GridItem() {
Text((index + 1).toString())
.xxx()
}
.backgroundColor('#0094ff')
.border({ width: 1 })
})
}
.width('100%') // 横向滚动 通过 width 设置宽度
.height(300)
.rowsTemplate('1fr 1fr')
// 竖向滚动 只写columnsTemplate
Grid() {
ForEach(this.list, (item: string, index) => {
GridItem() {
Text((index + 1).toString())
.xxx()
}
.backgroundColor('#0094ff')
.border({ width: 1 })
.width('100%')
.height(50) // 竖向滚动-通过 height 设置高度
})
}
.width('100%')
.height(300)
.columnsTemplate('1fr')
}
}
}
4. 控制器对象-控制滚动
- 创建 Scroller 对象(控制器对象)
- 控制器对象设置给 Grid
- 单独调用 Scroller 对象的 scrollPage 方法
// 1.创建 Scroller 对象(new 关键字,调用Scroller函数,返回一个Scroller的对象)
scroller: Scroller = new Scroller()
// 2.设置给 Grid:这个属性可选,所以之前不设置也不会报错
Grid(this.scroller) {
// ...
}
// 3.调用 Scroller 对象的 scrollPage 方法即可实现滚动
this.scroller.scrollPage({
next:true // 下一页
next:false // 上一页
})
@Entry
@Component
struct Page13_Grid_Scroller {
nums: number[] = Array.from({ length: 200 })
// 控制器对象,不是状态属性,不需要添加任何修饰符
scroller: Scroller = new Scroller()
build() {
Column() {
Text('控制器-代码控制滚动')
.fontSize(20)
.fontWeight(900)
.padding(10)
Grid(this.scroller) {
ForEach(this.nums, (item: number, index: number) => {
GridItem() {
Text(index + 1 + '')
}
.backgroundColor('#0094ff')
.width('25%')
})
}
.padding(10)
.height(450)
.rowsGap(10)
.columnsGap(10)
.rowsTemplate('1fr 1fr 1fr 1fr')
Row() {
Button('上一页')
.width(100)
.onClick(() => {
// 上一页
this.scroller.scrollPage({ next: false })
})
Button('下一页')
.width(100)
.onClick(() => {
// 下一页
this.scroller.scrollPage({ next: true })
})
}
.width('100%')
.justifyContent(FlexAlign.SpaceAround)
}
}
}
5. 控制器对象-自定义滚动条
隐藏默认滚动条
使用ScrollBar组件自定义滚动条
a. ScrollBar 和 Grid 设置同一个 Scroller(控制器对象)
b. 单独使用ScrollBar组件通过 参数 和 属性自定义滚动条
第一步:首先通过 Grid 的 scrollBar 属性关闭滚动条
属性名 | 类型 | 说明 |
---|---|---|
scrollBar | BarState | 设置滚动条状态。默认值: BarState.auto BarState.off 关闭 BarState.on 常驻 BarState.auto 按需显示 |
第二步:单独使用ScrollBar组件自定义滚动条,ScrollBar 和 Grid 设置同一个 Scroller(控制器对象)
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
scroller | Scroller | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
direction | ScrollBarDirection | 否 | 滚动条的方向,控制可滚动组件对应方向的滚动。默认值:ScrollBarDirection.Vertical |
state | BarState | 否 | 滚动条状态。 默认值:BarState.Auto |
// 创建控制器对象
scroller: Scroller = new Scroller()
// 设置给 Grid 组件
Grid(this.scroller){
// 略
}.scrollBar(BarState.off)//关闭默认滚动条
// 设置给 ScrollBar 组件
// 和 Grid 设置的是同一个
ScrollBar({
scroller: this.scroller,
direction: ScrollBarDirection.Horizontal // 方向
state: BarState.On // 滚动条持续显示
}) {
// 滚动内容 设置外观即可
Text()
}
// 设置外观
@Entry
@Component
struct Page14_Grid_ScrollBar {
// 长度为 30 每一项都为 undefined 的数组
list: string[] = Array.from({ length: 30 })
// 创建控制器对象==================
scroller: Scroller = new Scroller()
build() {
Column() {
Text('控制器-自定义滚动条')
.fontSize(20)
.fontWeight(900)
.padding(10)
// 设置控制器对象给 Grid================
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,// 和 Grid 同一个控制器对象
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)
}
}
Grid
http://example.com/posts/5275.html