基于List和Scroller由简单到复杂列表布局开发实践

build() { 
  Column() { 
    // 搜索框 置顶 
    if (this.searchSticky) { 
      this.searchBarBuilder() 
    } 
    // 下拉刷新组件 
    Refresh({ refreshing: $$this.isRefreshing }) { 
      // List组件作为长列表布局 
      List({ space: 10 }) { 
        // 搜索框跟随 
        if (!this.searchSticky) { 
          ListItem() { 
            this.searchBarBuilder() 
          } 
        } 
        // ListItem 自定义Swiper轮播图模块 
        ListItem() { 
          this.bannerBuilder() 
        } 
 
        // ListItem 自定义Grid快接入口模块 
        ListItem() { 
          this.quickBuilder() 
        } 
 
        // ListItem 自定义Column秒杀模块 
        ListItem() { 
          this.flashBuilder() 
        } 
 
        // ListItemGroup 商品分类列表 
        this.productsBuilder() 
        // 最后ListItem 自定义触底加载更多 
        ListItem() { 
          this.footerLoadingBuilder() 
        }.height(50).width('100%').backgroundColor(0xeeeeee) 
      } 
      .sticky(StickyStyle.Header) 
      .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true }) 
      .height('100%') 
      .layoutWeight(2) 
      // List组件触底模拟网络请求 
      .onReachEnd(() => { 
        if (this.productsArray.length >= 20) { 
          this.noMoreData = true 
          return 
        } 
        setTimeout(() => { 
          this.productsArray.push('商品' + (this.productsArray.length + 1)) 
        }, 2000) 
      }) 
    } 
    // 下拉刷新模拟网络请求 
    .onRefreshing(() => { 
      setTimeout(() => { 
        this.productsArray = ['商品1', '商品2', '商品3', '商品4', '商品5'] 
        this.noMoreData = false 
        this.isRefreshing = !this.isRefreshing 
      }, 2000) 
    }) 
    .layoutWeight(1) 
    .width('95%') 
  } 
}

@State private selectGroupIndex: number = -1 //导航栏选中index 
private cityScroller: ListScroller = new ListScroller() // 城市列表Scoller控制器 
private navgationScroller: ListScroller = new ListScroller() // 导航列表Scoller控制器 
private isClickScroll:boolean = false // 导航列表点击标记为true，城市列表触摸滚动为false 
build() { 
  Stack({alignContent : Alignment.End}) { 
    this.cityList() 
    this.navigationList() 
  } 
  .width('100%') 
  .height('100%').backgroundColor(0xFFFFFF) 
} 
// 城市列表 
@Builder 
cityList() { 
  List({ scroller: this.cityScroller }) { 
    ListItemGroup({ header: this.itemHead('当前城市') }) { 
      ListItem() { 
        Text(this.currentCity) 
        ...... 
      } 
    } 
 
    ListItemGroup({ header: this.itemHead('热门城市') }) { 
      ForEach(this.hotCities, (hotCity: string) => { 
        ListItem() { 
          Text(hotCity) 
          ...... 
        } 
      }) 
    } 
 
    // A~Z城市分组 
    ForEach(this.groupNameList, (item: string) => { 
      ListItemGroup({ header: this.itemHead(item) }) { 
        ForEach(this.getCitiesWithGroupName(item), (cityItem: City) => { 
          ListItem() { 
            Text(cityItem.city) 
            ...... 
          } 
        }, (item: City) => item.city) 
      } 
    }) 
  } 
  .width('100%') 
  .height('100%') 
  .scrollBar(BarState.Off) 
  .sticky(StickyStyle.Header) 
  .onTouch(()=>{ 
    // 城市列表触摸滚动，isClickScroll=false，防止滚动过程中与导航列表触发滚动冲突 
    this.isClickScroll = false 
  }) 
  .onScrollIndex((start: number, end: number, center: number)=>{ 
    // 通过selectGroupIndex状态变量与start联动控制导航列表选中状态 
    if(!this.isClickScroll) 
      this.selectGroupIndex = start - 2 
  }) 
} 
// 导航列表@Builder 
navigationList() { 
  List({scroller:this.cityScroller1}) { 
    ForEach(this.groupNameList, (item: string, index: number) => { 
      ListItem() { 
        Text(item) 
        ...... 
        .onClick(() => { 
          // 导航列表选中isClickScroll=true，防止与城市列表滚动过程中带动导航列表状态变化 
          this.isClickScroll = true 
          this.selectGroupIndex = index 
          // 通过导航选中selectGroupIndex与Scroller控制城市列表滚动到对应位置 
          this.cityScroller.scrollToIndex(index + 2, true, ScrollAlign.START) 
        }) 
      } 
    }, (item: string) => item) 
  } 
  .listDirection(Axis.Vertical) 
  .backgroundColor(Color.Transparent) 
  .width('10%') 
}

export class ShowData { 
  sticky?:string 
  sub?: string[]; 
  scrollerArray?: Scroller[] = []; 
} 
@State remainOffset: number = 0 // 内容行在横向滚动时回调的offset 
private bottomRightScroller: Scroller = new Scroller() //下部分左侧标题List（行标题） 
private bottomLeftScroller: Scroller = new Scroller() // 下部分右侧内容List（内容） 
private topRightScroller: Scroller = new Scroller() // 上部分右侧类型List（列标题） 
// 整体布局 
build() { 
  Column() { 
    // 上部分 
    this.topFixed() 
    // 下部分 
    Row() { 
      this.leftList() 
      this.rightList() 
      Line().height('100%').width(0.5).backgroundColor('#EEEEEE').position({ x: LeftItemWidth }) 
    } 
    .justifyContent(FlexAlign.Start) 
    .alignItems(VerticalAlign.Top) 
  }.height('100%') 
  .justifyContent(FlexAlign.Start) 
  .alignItems(HorizontalAlign.Start) 
} 
// 上部分整体Row(Column + List) 
@Builder 
topFixed() { 
  Row() { 
    // 上部分左侧固定信息 
    Column() { 
      ....... 
    } 
    ....... 
    .padding(10) 
    // 分割线 
    Line().height(100).width(0.5).backgroundColor(0xeeeeee) 
    // 上部分右侧车型横向滚动列表 
    List({ scroller: this.topRightScroller/* 绑定Scroller控制器与其他控制器联动*/ }) { 
      ForEach(this.topRightArr, (item: string, index: number) => { 
        ListItem() { 
          ....... 
        } 
      }, (item: string) => item) 
    } 
    ....... 
    .onScrollFrameBegin((offset: number, state: ScrollState) => { 
      // 关键联动，通过对象保存的Scroller控制器数组遍历保持offset同步 
      this.dataSource.getAllData().forEach(showData => { 
        showData.scrollerArray!.forEach(scroller => { 
          scroller.scrollTo({ xOffset: this.topRightScroller.currentOffset().xOffset + offset, yOffset: 0 }) 
        }) 
      }) 
      return { offsetRemain: offset } 
    }) 
  }.height(100).width('100%') 
} 
// 下部分右侧内容显示区域纵向List(ListItem(List)) 
@Builder 
rightList() { 
  List({ initialIndex: 0, scroller: this.bottomRightScroller }) { 
    // 通过LazyForEach加载每一行 
    LazyForEach(this.dataSource, (item: ShowData, index: number) => { 
      ListItemGroup({ header: this.rightStickyHeader(index) }) { 
        ForEach(item.sub, (subItem: string, index1: number) => { 
          // 自定义ListItem中包含横向滚动List 
          ItemComponent({ 
            scroller: item.scrollerArray![index1], 
            scrollCallBack: (value) => { 
              // value为子List横向滚动onScrollFrameBegin回传offset，在手指拖动时保持联动一致 
              // 顶部车型List跟随联动 
              this.topRightScroller.scrollTo({ xOffset: value, yOffset: 0 }) 
              // 通过对象保存的Scroller数组跟随保持联动 
              this.dataSource.getAllData().forEach(showData => { 
                showData.scrollerArray!.forEach(scroller => { 
                  if (scroller != item.scrollerArray![index1]) { 
                    scroller.scrollTo({ xOffset: value, yOffset: 0 }) 
                  } 
                }) 
              }) 
            }, 
            remainOffsetCallBack: (value) => { 
              // 滚动过程中回传保持同步的offset值 
              this.remainOffset = value 
            } 
          }) 
        }, (item: string) => item) 
      } 
 
    }, (item: ShowData, index: number) => item.sticky! + index) 
  } 
  ....... 
  .onScrollFrameBegin((offset: number, state: ScrollState) => { 
    // 内容List纵向滚动带动左侧标题List跟随滚动 
    this.bottomLeftScroller.scrollTo({ 
      xOffset: 0, 
      yOffset: this.bottomRightScroller.currentOffset().yOffset + offset, 
      animation: false 
    }) 
    return { offsetRemain: offset } 
  }) 
    .onScroll(() => { 
      // 内容List纵向滚动过程中，每一行中子List的Scroller滚动到remainOffset与已显示的行位置保持一致 
      this.dataSource.getAllData().forEach(showData => { 
        showData.scrollerArray!.forEach(scroller => { 
          scroller.scrollTo({ xOffset: this.remainOffset, yOffset: 0 }) 
        }) 
      }) 
    }) 
  ....... 
} 
@Component 
struct ItemComponent { 
  private arr: string[] = [ 
    '1', '2', '3', '4', '5', '6', '7', '8'] 
  private dataSource = new CommonDataSource<string>() 
  private scroller?: Scroller = undefined // 内容行List绑定Scroller 
  private scrollCallBack?: (param: number) => void // 触摸滚动过程中回调实时offset 
  private remainOffsetCallBack?: (param: number) => void // 滚动时回调同步offset 
 
  aboutToAppear(): void { 
    this.dataSource.setData(this.arr) 
  } 
 
  // 下部分参数列表每行数据List 
  @Builder 
  RightSingleLineList() { 
    List({ scroller: this.scroller }) { 
      LazyForEach(this.dataSource, (item: string, index: number) => { 
        ListItem() { 
          ...... 
        } 
        .width(RightItemWidth) 
      }, (item: string) => item) 
    } 
    ...... 
    .onScroll(() => { 
      // 通过callBack回调行在横向滚动时，Scroller当前的offset 
      if (this.remainOffsetCallBack) 
        this.remainOffsetCallBack(this.scroller!.currentOffset().xOffset) 
    }) 
      .onScrollFrameBegin((offset: number, state: ScrollState) => { 
        // 触摸滚动实时跟随回调 
        if (this.scrollCallBack) { 
          this.scrollCallBack(this.scroller!.currentOffset().xOffset + offset) 
        } 
        return { offsetRemain: offset } 
      }) 
  } 
 
  build() { 
    Column() { 
      this.RightSingleLineList() 
      Line().width("100%").height(0.5).backgroundColor(0xeeeeee) 
    }.height(ItemHeight) 
  } 
}