HarmonyOS实战开发 —— 基于Grid实现混合布局

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

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

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

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

方案

1. 第三方服务的目录页面通过list横向布局实现，且通过scroll的属性与下面详细的功能属性模块list列表形成二级联动。
2. 通过onScrollFrameBegin事件计算实时滚动量，滚动整个页面，使上方精选布局滚动，如果页面已滚动到底部，列表不在顶部或列表有正向偏移量，则使页面上方精选部分自动上滑，功能列表置顶。
3. 通过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 = [];