【鸿蒙实战开发】基于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 =