【鸿蒙实战开发】基于Grid实现混合布局

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。

下面列举一些Grid组件与其他容器组件嵌套使用的场景案例：

场景一：Grid与list相互嵌套使用。

方案：

⦁ 第三方服务的目录页面通过list横向布局实现，且通过scroll的属性与下面详细的功能属性模块list列表形成二级联动。

⦁ 通过onScrollFrameBegin事件计算实时滚动量，滚动整个页面，使上方精选布局滚动，如果页面已滚动到底部，列表不在顶部或列表有正向偏移量，则使页面上方精选部分自动上滑，功能列表置顶。

⦁ 通过ForEach遍历出来的功能目录，与ForEach遍历出来的详细菜单列表，目录与内容两者的index值一致，两个分属不同的List列表，可以关联不同的Scroll值，可以通过scrollToIndex方法来使两个列表形成二级联动效果。

核心代码

enum ScrollPosition { 
  start, 
  center, 
  end 
} 
 
class grids { 
  gridname: string = ''; 
  gridList: string[] = []; 
  constructor(gridname: string, gridList: string[]) { 
    this.gridname = gridname; 
    this.gridList = gridList; 
  } 
} 
 
@Entry 
@Component 
struct TextDemo { 
  @State listPosition: number = ScrollPosition.start; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。 
  @State scrollPosition: number = ScrollPosition.start; // 0代表滚动到页面顶部，1代表中间值，2代表滚动到页面底部。 
  @State showTitle: boolean = false; 
  @State currentYOffset: number = 0; 
  private scrollerForScroll: Scroller = new Scroller(); 
  private scrollerForList: Scroller = new Scroller(); 
  private scrollerForTitle: Scroller = new Scroller(); 
  @State currentIndex: number = 0; 
  // 目录列表 
  @State list01: string[] = ['第三方服务', '查询', '财富', '转账', '贷款', '跨境金融']; 
  @State gridList1: grids[] = []; 
  @State sizeList: number[] = [15]; 
 
  aboutToAppear() { 
    ... // 初始化数据 
  } 
 
  @Builder myBuilder() { 
    Row() { 
      List({ space: 30, scroller: this.scrollerForTitle }) { 
        ForEach(this.list01, (item: string, index) => { 
          ListItem() { 
            Column() { 
              Text(item) 
                .fontSize(15) 
                .fontWeight(this.sizeList[index] == 15 ? FontWeight.Bold : FontWeight.Regular) 
            } 
            // .width('25%') 
            .height(35) 
            .onClick(() => { 
              this.scrollerForList.scrollToIndex(index) 
              this.scrollerForScroll.scrollEdge(Edge.Bottom) 
              this.sizeList = []; 
              this.sizeList[index] = 15; 
            }) 
          } 
        }) 
      } 
      .listDirection(Axis.Horizontal) 
      .scrollBar(BarState.Off) 
    } 
    .backgroundColor(Color.White) 
    // .alignItems(VerticalAlign.Center) 
  } 
 
  build() { 
    Column(){ 
      Image($r('app.media.img')) 
        .width('100%') 
        .height('40') 
      Column(){ 
        Stack({ alignContent: Alignment.Top }) { 
          Scroll(this.scrollerForScroll) { 
            Column() { 
              GridDemo01({ 
                gridList: new grids('精选', 
                  ['理财', '基金', '外汇购入', '朝朝盈', '多宝理财', '银行卡转入', '薪福专区', '网点预约']) 
              }).backgroundColor(Color.White) 
              this.myBuilder(); 
              Divider() 
                .color('#d9d4d4') 
                .strokeWidth(5) 
              List({ space: 10, scroller: this.scrollerForList }) { 
                ForEach(this.gridList1, (item: grids, index) => { 
                  GridDemo01({ gridList: item }) 
                    .onVisibleAreaChange([0.8], (isVisible) => { 
                      if (isVisible) { 
                        // 二级联动 
                        this.currentIndex = index; 
                        this.scrollerForTitle.scrollToIndex(this.currentIndex); 
                      } 
                    }) 
                }, (item: grids) => item.gridname) 
              } 
              .padding({ left: 10, right: 10 }) 
              .width("100%") 
              .edgeEffect(EdgeEffect.None) 
              .scrollBar(BarState.Off) 
              // Scroll到达起始位置时触发。 
              .onReachStart(() => { 
                this.listPosition = ScrollPosition.start 
              }) 
              // Scroll到达末尾位置时触发。 
              .onReachEnd(() => { 
                this.listPosition = ScrollPosition.end 
              }) 
              // 获取List显示区域内第一个子组件的索引值 
              .onScrollIndex((start: number, end: number, center: number) => { 
                this.sizeList = []; 
                this.sizeList[start] = 15; 
              }) 
              .onScrollFrameBegin((offset: number, state: ScrollState) => { 
                // 滑动到列表中间时 
                if (!((this.listPosition == ScrollPosition.start && offset < 0) 
                  || (this.listPosition == ScrollPosition.end && offset > 0))) { 
                  this.listPosition = ScrollPosition.center 
                } 
                // 如果页面已滚动到底部，列表不在顶部或列表有正向偏移量 
                if (this.scrollPosition == ScrollPosition.end 
                  && (this.listPosition != ScrollPosition.start || offset > 0)) { 
                  return { offsetRemain: offset }; 
                } else { 
                  this.scrollerForScroll.scrollBy(0, offset) 
                  return { offsetRemain: 0 }; 
                } 
              }) 
              .width("100%") 
              .height("calc(100% - 40vp)") 
              .backgroundColor('#F1F3F5') 
            } 
          } 
          .scrollBar(BarState.Off) 
          .width("100%") 
          .height("100%") 
          .onScroll((xOffset: number, yOffset: number) => { 
            this.currentYOffset = this.scrollerForScroll.currentOffset().yOffset; 
            // 非（页面在顶部或页面在底部），则页面在中间 
            if (!((this.scrollPosition == ScrollPosition.start && yOffset < 0) 
              || (this.scrollPosition == ScrollPosition.end && yOffset > 0))) { 
              this.scrollPosition = ScrollPosition.center 
            } 
          }) 
          .onScrollEdge((side: Edge) => { 
            if (side == Edge.Top) { 
              // 页面在顶部 
              this.scrollPosition = ScrollPosition.start 
            } else if (side == Edge.Bottom) { 
              // 页面在底部 
              this.scrollPosition = ScrollPosition.end 
            } 
          }) 
          .onScrollFrameBegin(offset => { 
            if (this.scrollPosition == ScrollPosition.end) { 
              return { offsetRemain: 0 }; 
            } else { 
              return { offsetRemain: offset }; 
            } 
          }) 
        } 
        .width('100%') 
        .height('100%') 
        .backgroundColor(0xDCDCDC) 
      } 
    } 
  } 
}
@Component 
struct GridDemo01 { 
  @State gridList: grids = new grids('', []); 
  @State isfla: boolean = false; 
 
  build() { 
    Column() { 
      Grid() { 
        GridItem() { 
          Text(this.gridList.gridname) 
            .fontSize(20) 
            .height(30) 
        } 
      } 
      Grid() { 
        ForEach(this.gridList.gridList, (item: string, index) => { 
          GridItem() { 
            Column() { 
              Image($r(`app.media.icons${index + 1}`)) 
                .syncLoad(true) 
                .width(40) 
                .height(40) 
              Text(item) 
                .fontSize(12) 
            } 
          } 
        }) 
      } 
      .columnsGap(20) 
      .height(75 * (this.gridList.gridList.length / 4) + (this.gridList.gridList.length % 4 > 0 ? 75 : 0)) 
      .rowsGap(20) 
      .scrollBar(BarState.Off) 
      .columnsTemplate('1fr 1fr 1fr 1fr') 
    } 
  } 
}

场景二：Grid与swiper相互嵌套使用。

方案：

⦁ Grid与swiper相互嵌套使用，通过多层遍历存放Grid容器组件的自定义组件来达到分页效果。

⦁ 每一页里面功能菜单的数量存储至分页数组gridColList1。根据存入的值遍历拆分总菜单数。

⦁ onGestureSwipe功能为页面跟手滑动过程中，逐帧触发该回调。使用extraInfo.currentOffset大小判断向左向右滑动，在向左向右滑动的时候逐帧修改分页的高度，来形成在滑动下一页的时候分页与下方瀑布流形成联动效果。

⦁ onAnimationStart的效果为当滑动到一半不足以滑动到下一页，高度回弹，能够使高度以动画的效果回弹到未滑动前的高度。

核心代码

import { display } from '@kit.ArkUI'; 
 
@Entry 
@Component 
struct GridDemo { 
  @State message: string = 'Hello World'; 
  @State numberList: number[] = 
    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30]; 
  private swiperController: SwiperController = new SwiperController() 
  @State gridColList: number = 0; // 第一页数据量 
  // @State gridColList1:ArrayList<number> = new ArrayList() // 遍历页数 
  @State gridColList1: number[] = [10, 30]; 
  @State gridcol: number = 10; // 断点值 
  @State swiperDistance: number = 150; 
  @State displayWidth: number = 0; 
 
  onChage() { 
    console.log('this.gridColList1:' + this.gridColList1); 
  } 
 
  aboutToAppear(): void { 
    // 获取屏幕大小，用于后续计算卡片的偏移量 
    const displayData: display.Display = display.getDefaultDisplaySync(); 
    this.displayWidth = px2vp(displayData.width); 
    console.log('displayWidth:', this.displayWidth) 
  } 
 
  build() { 
    Row() { 
      Column() { 
        // 修改成搜索框 
        Image($r('app.media.text02')) 
          .width("100%") 
          .height('40') 
        Swiper(this.swiperController) { 
          ForEach(this.gridColList1, (item: number, index) => { 
            Child({ numberList: this.numberList.slice(index * this.gridColList1[index-1], item) }) 
            // Child({numberList:this.numberList.slice(this.gridColList,this.gridcol)}) 
          }) 
        } 
        .onChange(() => { 
          console.log('swiperDistance=', this.swiperDistance) 
          console.log('displayWidth=', this.displayWidth) 
        }) 
        .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => { 
          animateTo({ 
            duration: 700, 
            curve: Curve.Smooth, 
            playMode: PlayMode.Normal, 
            onFinish: () => { 
            } 
          }, () => { // 通过左右滑动的距离来计算对应的上下位置的变化 
            if (extraInfo.currentOffset < 0) { // 向左偏移 
              this.swiperDistance = 250 
            } else if (extraInfo.currentOffset > 0) { // 向右偏移 
              this.swiperDistance = 150 
            } 
          }) 
        }) 
        .onAnimationStart((_: number, targetIndex: number) => { 
          animateTo({ 
            duration: 700, 
            curve: Curve.Smooth, 
            playMode: PlayMode.Normal, 
            onFinish: () => { 
            } 
          }, () => { 
            if (targetIndex === 0) { 
              this.swiperDistance = 150; 
            } else if (targetIndex === 1) { 
              this.swiperDistance = 250; 
            } 
          }) 
        }) 
        .height(this.swiperDistance) 
 
        WaterFlowDemo() 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
@Component 
struct Child { 
  @Prop numberList: number[]; 
  @State hei: number = 120 
 
  build() { 
    Grid() { 
      ForEach(this.numberList, (item: number) => { 
        GridItem() { 
          Column() { 
            Image($r('app.media.app_icon')) 
              .width(20) 
              .height(20) 
            Text("菜单" + item) 
              .fontSize(15) 
          } 
        } 
      }) 
    } 
    .columnsGap(20) 
    .rowsGap(20) 
    .scrollBar(BarState.Off) 
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 
    .height(50 * this.numberList.length / 4) 
    .animation({ 
      duration: 1000 
    }) 
  } 
}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH