HarmonyOS开发之NestedScroll嵌套滑动

在Harmony应用开发中，为了提高用户体验，开发者经常需要实现复杂的滑动交互效果。特别是在一些需要内外层滑动结合的应用场景下，如何优雅地处理这些滑动事件变得尤为重要。本文将探讨两种使用nestedScroll机制来实现滑动布局的方法，并附上相应的代码示例。

场景一：基于NestedScroll实现WaterFlow与Scroll混合滑动

在这个场景中，我们将创建一个外层为Scroll容器，内层为WaterFlow（瀑布流）布局的组合滑动界面。通过nestedScroll属性，我们可以让外层滑动时，内层也可以响应滑动事件，从而达到联动的效果。

Scroll() {
  Column({ space: 2 }) {
    Image($r('app.media.dzdp'))
      .width('100%')
      .height(200)
      .objectFit(ImageFit.Cover)

    WaterFlow() {
      LazyForEach(this.dataSource, (item: number) => {
        FlowItem() {
          Column() {
            Text("旅游景点" + item).fontSize(12).height('16')
            Image($r(`app.media.img_${item % 10}`))
              .objectFit(ImageFit.Fill)
              .width('100%')
              .layoutWeight(1)
          }
        }
        .width('100%')
        .height(this.itemHeightArray[item % 100])
        .backgroundColor(this.colors[item % 5])
      }, (item: string) => item)
    }
    .columnsTemplate("1fr 1fr")
    .columnsGap(10)
    .rowsGap(5)
    .backgroundColor(0xFAEEE0)
    .width('100%')
    .height('100%')
    .nestedScroll(
      {
        scrollForward: NestedScrollMode.SELF_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
  }
}

上述代码中，WaterFlow组件负责展示瀑布流布局中的每一项数据，而nestedScroll则确保了外层滑动时内层也会相应地滑动。

场景二：List中嵌套List滑动

在这个场景中，我们需要在一个外层的List组件内部嵌入另一个List组件，并且这两个列表需要能够相互协作滑动。同样地，我们通过设置nestedScroll属性来实现这种联动。

// 定义内层列表项的组件
@Component
struct ItemComponent {
  build() {
    Column() {
      header({ title: this.title })
      List() {
        LazyForEach(this.generateDataSource(), (data: string, index) => {
          ListItem() {
            Row(){
              Text(data)
                .fontSize(14)
                .backgroundColor(Color.White)
                .fontColor(bgColors[index % bgColors.length])
                .textAlign(TextAlign.Center)
                .onAppear(() => {
                  console.info("appear:" + data)
                })
              Image($r(this.Image))
                .width(40)
                .height(20)
                .margin({
                  left: 20
                })
            }
            .width('100%')
          }
          .height(rowHeight)
        }, (data: string, index) => {
          return data + ' - ' + index.toString()
        })
      }
      .nestedScroll({
        scrollForward:this.posType[this.currentType[0]],
        scrollBackward: this.posType[this.currentType[1]]
      })
      .scrollBar(BarState.Off)
      .cachedCount(10)
      .friction(1.25)
      .edgeEffect(EdgeEffect.None)
    }
  }
}

// 外层列表组件
@Component
export struct ListToList {
  @Builder
  private mainListView() {
    List({ scroller: this.scroll }) {
      // 嵌入多个带有不同数据源的内层列表
      // 例如：
      ListItem() {
        ItemComponent({ title: '美食', datas: generateData('美食', 20) ,currentType:[0,1],Image: 'app.media.food'})
      }
      .height('100%')
      .margin({bottom:50})
      
      // 更多类似结构...
    }
    .onReachEnd(() => {
      console.log('is end')
    })
    .divider({ strokeWidth: 10, color: Color.Gray })
    .height("100%")
    .width("100%")
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
  }
}

在这个示例中，ListToList组件定义了一个包含多个内层ItemComponent的外层List。每个ItemComponent代表了一个带有标题和列表项的子列表，这些列表项通过nestedScroll属性实现了与外层列表的联动。