鸿蒙网格布局Grid/GridItem

第二章

Rrid/GridItem结构

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

2.1Grid的常用属性

.rowsTemplate()（将所给的高按比例分成固定的行数，例如'1fr 1rf 2fr'将其分为三份每份的大小之比为1：1：2，如果当rowsTemplate()在而columnsTemplate()不在是网格可以横向滑动，两者同时存在则固定行列）

.columnsTemplate()（将所给的宽按比例分成固定的列数，例如'1fr 1rf 2fr'将其分为三份每份的大小之比为1：1：2，如果当columnsTemplate()在而rowsTemplate()不在是网格可以纵向滑动，两者同时存在则固定行列）

rowsGap()（设置行与行之间的间距）

columnsGap()（设置列与列之间的间距）

2.2固定行列

Grid() {
  this.columBuilder('app.media.ic_taobao_01', '淘金币')
  this.columBuilder('app.media.ic_taobao_02', '一起摇现金')
  this.columBuilder('app.media.ic_taobao_03', '闲鱼')
  this.columBuilder('app.media.ic_taobao_04', '中通快递')
  this.columBuilder('app.media.ic_taobao_05', '芭芭农场')
  this.columBuilder('app.media.ic_taobao_06', '淘宝珍库')
  this.columBuilder('app.media.ic_taobao_07', '阿里拍卖')
  this.columBuilder('app.media.ic_taobao_08', '阿里药房')
  this.columBuilder('app.media.ic_taobao_09', '小黑盒')
  this.columBuilder('app.media.ic_taobao_10', '菜鸟')
  this.columBuilder('app.media.ic_taobao_11', 'U先试用')
  this.columBuilder('app.media.ic_taobao_12', '有好价')
  this.columBuilder('app.media.ic_taobao_13', '极有家')
  this.columBuilder('app.media.ic_taobao_14', '天猫榜单')
  this.columBuilder('app.media.ic_taobao_15', '天天特卖')
  this.columBuilder('app.media.ic_taobao_16', '每日好店')
  this.columBuilder('app.media.ic_taobao_17', '全球购')
  this.columBuilder('app.media.ic_taobao_18', '我的好车')
  this.columBuilder('app.media.ic_taobao_19', '造点新货')
  this.columBuilder('app.media.ic_taobao_20', '首单优惠')
  this.columBuilder('app.media.ic_taobao_21', '潮Woo')
  this.columBuilder('app.media.ic_taobao_22', '亲宝贝')
  this.columBuilder('app.media.ic_taobao_23', '领券中心')
  this.columBuilder('app.media.ic_taobao_24', '天猫奢品')
  this.columBuilder('app.media.ic_taobao_25', 'iFashion')
}
.width('100%')
.height(400)
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)

2.3GridItem的常用属性

rowStart()（指定当前元素起始行号）

rowEnd()（指定当前元素结尾行号）

columnStart()（指定当前元素起始列号）

columnStart()（指定当前元素结尾行号）

2.4合并行列

nums: number[] = Array.from({ length: 12 })

build() {
  Grid() {
    ForEach(this.nums, (item: number, index: number) => {
      if (index === 2) {
        GridItem() {
          Text(index + '')
            .fontColor(Color.White)
            .fontSize(30)
        }
        //从索引的位置开始将其与同一行上的格子向右合并，合并数量为columnStart与columnEnd之间的差
        .columnStart(3)
        .columnEnd(4)
        .backgroundColor('#9dc3e6')
      } else if (index === 3) {
        GridItem() {
          Text(index + '')
            .fontColor(Color.White)
            .fontSize(30)
        }
        //从索引的位置开始将其与同一列上的格子向下合并，合并数量为rowStart与rowEnd之间的差
        .rowStart(2)
        .rowEnd(3)
        .backgroundColor('#9dc3e6')
      } 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)
}

2.5设置滚动

interface NavItem {
  title: string
  icon: ResourceStr
}

@Entry
@Component
struct App1 {
  scroller = new Scroller()
  @State message: string = '滚动';
  navList: NavItem[] = [
    { 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') }
  ]

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
      Grid(this.scroller) {
        ForEach(this.navList, (item: NavItem, index: number) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width('80%')
              Text(item.title)
                .fontSize(12)
            }
            .width('100%')
          }
          .width('20%')
        })
      }
      .width('100%')
      .height(160)
      //只写了rowsTemplate()所以可以横向滚动，详细请看上面2.1
      .rowsTemplate('1fr 1fr ')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)
    }
    .height('100%')
    .width('100%')
  }
}

2.6代码滚动

实现步骤：

1.设置实例化控制器

2.设置给Grid

3.调用控制器方法

控制器方法

scrollPage({ next: false })（next为false则是上一页，true则是下一页）

interface NavItem {
  title: string
  icon: ResourceStr
}

@Entry
@Component
struct App1 {
  scroller = new Scroller()
  @State message: string = '滚动';
  navList: NavItem[] = [
    { 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') }
  ]

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
      Grid(this.scroller) {
        ForEach(this.navList, (item: NavItem, index: number) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width('80%')
              Text(item.title)
                .fontSize(12)
            }
            .width('100%')
          }
          .width('20%')
        })
      }
      .width('100%')
      .height(160)
      .rowsTemplate('1fr 1fr ')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)

      Row() {
        Button('上一页')
          .onClick(() => {
            this.scroller.scrollPage({ next: false })
          })
        Button('上一页')
          .onClick(() => {
            this.scroller.scrollPage({ next: true })
          })
      }

    }
    .height('100%')
    .width('100%')
  }
}

2.7自定义滚动条

结构

scroller: Scroller = new Scroller()

Grid(this.scroller){
 
}

// 创建 ScrollBar 组件并设置属性
ScrollBar({
  scroller: this.scroller,//和Grid共用一个scroller
  direction: ScrollBarDirection.Horizontal // 滚动方向
}) {
  
  Text()//可以为任意空组件
  //设置的滑动部分的外观
}
// 设置滚动条的外观

interface NavItem {
  title: string
  icon: ResourceStr
}

@Entry
@Component
struct App1 {
  scroller = new Scroller()
  @State message: string = '滚动';
  navList: NavItem[] = [
    { 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') }
  ]

  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
      Grid(this.scroller) {
        ForEach(this.navList, (item: NavItem, index: number) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width('80%')
              Text(item.title)
                .fontSize(12)
            }
            .width('100%')
          }
          .width('20%')
        })

      }
      .width('100%')
      .height(160)
      .rowsTemplate('1fr 1fr ')
      .columnsGap(10)
      .rowsGap(10)
      .scrollBar(BarState.Off)

      ScrollBar({
        scroller: this.scroller,
        direction: ScrollBarDirection.Horizontal
      }) {
        Text()
          .width(40)
          .height(20)
          .backgroundColor(Color.Orange)
          .borderRadius(10)
      }
      .width(100)
      .height(20)
      .backgroundColor(Color.Red)
      .borderRadius(10)
      

      Row() {
        Button('上一页')
          .onClick(() => {
            this.scroller.scrollPage({ next: false })
          })
        Button('上一页')
          .onClick(() => {
            this.scroller.scrollPage({ next: true })
          })
      }

    }
    .height('100%')
    .width('100%')
  }
}