Grid

Grid

如果布局是由 很多的 行 和 列 所组成、行列可能需要合并、甚至滚动,就可以使用网格布局来实现

1. 固定行列

  1. 子组件必须GridItem组件,需要展示的内容设置在 GridItem 内部既可
  2. 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. 设置滚动

设置方式:

  1. 水平滚动:设置的是rowsTemplate,Grid的滚动方向为水平方向。
  2. 垂直滚动:设置的是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. 控制器对象-控制滚动

  1. 创建 Scroller 对象(控制器对象)
  2. 控制器对象设置给 Grid
  3. 单独调用 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. 控制器对象-自定义滚动条

  1. 隐藏默认滚动条

  2. 使用ScrollBar组件自定义滚动条

    ​ a. ScrollBar 和 Grid 设置同一个 Scroller(控制器对象)

    ​ b. 单独使用ScrollBar组件通过 参数 和 属性自定义滚动条

第一步:首先通过 GridscrollBar 属性关闭滚动条

属性名 类型 说明
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
作者
John Doe
发布于
2024年9月2日
许可协议