关于Grid布局的使用方法

1.Grid布局的基本语法

Grid() {
  GridItem(){
    // 展示的内容放在这里
  }
  GridItem(){
    // 展示的内容放在这里
  }
}

2. Grid是网格布局

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

2.1 Grid属性的介绍

2.1 rowsTemplate属性

2.1.2 columnTemplate属性

2.1.3 rowsGap属性和columnsGap属性

2.2 GridItem属性

3. 自定义滚动条

如果默认的滚动条外观无法满足要求，我们还可以进行自定义

自定义有两种方法：

1. 使用提供的属性调整（可调整属性有限）
2. 使用 ScrollBar 组件自定义（可定制性高）

3.1 使用属性调整

先来看看如何使用属性调整

如果需求只是调整颜色和宽度，或者是关闭滚动条就使用该方式

属性名	类型	说明
scrollBar	BarState	设置滚动条状态。默认值：BarState.autoBarState.off 关闭BarState.on 常驻BarState.auto 按需显示
scrollBarColor	string	number	Color	设置滚动条的颜色。
scrollBarWidth	string	number	设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。默认值：4单位：vp

代码展示：

interface XMNavItem{
  title: string
  icon: ResourceStr
}
@Entry
@Component
struct Index {
  navList: XMNavItem[] = [
    { title: '上新精选', icon: $r('app.media.ic_xiaomi_nav_01') },
    { title: '智能家电', icon: $r('app.media.ic_xiaomi_nav_02') },
    { title: '小米众筹', icon: $r('app.media.ic_xiaomi_nav_03') },
    { title: '有品会员', icon: $r('app.media.ic_xiaomi_nav_04') },
    { title: '有品秒杀', icon: $r('app.media.ic_xiaomi_nav_05') },
    { title: '原产地', icon: $r('app.media.ic_xiaomi_nav_06') },
    { title: '生活优选', icon: $r('app.media.ic_xiaomi_nav_07') },
    { title: '手机', icon: $r('app.media.ic_xiaomi_nav_08') },
    { title: '小米自营', icon: $r('app.media.ic_xiaomi_nav_09') },
    { title: '茅台酒饮', icon: $r('app.media.ic_xiaomi_nav_10') },
    { title: '鞋服饰品', icon: $r('app.media.ic_xiaomi_nav_11') },
    { title: '家纺餐厨', icon: $r('app.media.ic_xiaomi_nav_12') },
    { title: '食品生鲜', icon: $r('app.media.ic_xiaomi_nav_13') },
    { title: '好惠买', icon: $r('app.media.ic_xiaomi_nav_14') },
    { title: '家具家装', icon: $r('app.media.ic_xiaomi_nav_15') },
    { title: '健康养生', icon: $r('app.media.ic_xiaomi_nav_16') },
    { title: '有品海购', icon: $r('app.media.ic_xiaomi_nav_17') },
    { title: '个护清洁', icon: $r('app.media.ic_xiaomi_nav_18') },
    { title: '户外运动', icon: $r('app.media.ic_xiaomi_nav_19') },
    { title: '3C数码', icon: $r('app.media.ic_xiaomi_nav_20') }
  ]
  @Builder
  gridBulider(){
    Grid(this.scroller){
    ForEach(this.navList,(item:XMNavItem,index:number)=>{
      GridItem(){
        Column(){
          Image(item.icon)
            .height('50%')
          Text(item.title)
            .fontSize(12)
        }
        .width('20%')
      }
    })
    }
    .rowsTemplate('1fr 1fr')
    .scrollBar(BarState.Off)
    .width('100%')
    .height(400)

    ScrollBar({
      scroller:this.scroller,
      direction:ScrollBarDirection.Horizontal,
      state:BarState.On
    }){
      Text()
      .width(25)
      .height(10)
      .backgroundColor(Color.Green)
        .borderRadius(10)

    }
    .width(100)
    .height(10)
    .backgroundColor(Color.Gray)
    .borderRadius(10)



}

scroller = new Scroller()

  build() {
    Column(){
      this.gridBulider()


    }
    .width('100%')
    .height('100%')
    // .backgroundColor(Color.Pink)
  }
}

实现的效果：