鸿蒙开发5.0【基于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 
    }) 
  } 
}

以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：

除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：

内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上快速成长！

鸿蒙【北向应用开发+南向系统层开发】文档

鸿蒙【基础+实战项目】视频

鸿蒙面经

为了避免大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！