滚动视图联动：实现多List联动滚动，横竖向滚动

左右List数据联动，可上下滚动，右侧List可左右滚动，左侧List悬停左侧效果。

场景：股票列表，汽车类属性比较

HarmonyOS

wngsheng

2024-05-26 15:48:55

浏览

回答 1

待解决

回答 1

按赞同

按时间

vclearner

使用的核心API

组件List

 .onScrollFrameBegin() 
 .nestedScroll()

组件Scroll

 .onScroll() 
 .nestedScroll()

滚动视图控制器Scroller

 .currentOffset() 
 .scrollTo()

核心代码解释

1. 确定总体布局

contentBuilder() { 
    Column() { 
        // 顶部固定 
        Row(){ 
            // 与左侧固定列表(l2)保持一致 
            Column() 
            // 可左右滚动列表(l1) 
            List()  
        } 
        // 内容滚动区域 
        Row() { 
            // 左侧固定列表(l2) 
            List()  
            // 右侧可左右滚动Scroll 
            Scroll() { 
                // 可上下滚动列表(l3) 
                List() 
            }  
        } 
    } 
}

1. 顶部固定

顶部固定位置左侧

Column() { 
    Text('共11款车') 
        .fontSize(15) 
    Toggle({ type: ToggleType.Switch, isOn: false }) 
        .height(30) 
        .width(50) 
    Text('只看差异') 
        .fontSize(15) 
        .fontWeight(FontWeight.Bolder) 
}

顶部固定位置右侧

List({ scroller: this.topRightScroller }) { 
        ForEach(this.topRightArr, (item: string, index: number) => { 
          ListItem() { 
            Text(item) 
              .height(100) 
              .width(RightItemWidth) 
              .fontSize(16) 
              .textAlign(TextAlign.Start) 
              .borderRadius(0) 
              .padding(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      }

1. 内容区域

左侧固定

List({scroller: this.tempScroller }) { 
      ForEach(this.leftGroupArr, (item: string, index: number) => { 
        ListItemGroup({ header: this.leftStickyHeader(item) }) { 
          ForEach(this.arr, (item: string, index: number) => { 
            ListItem() { 
              Column(){ 
                Text(item) 
                  .width(LeftItemWidth) 
                  .height('100%') 
                  .fontSize(16) 
                  .textAlign(TextAlign.Start) 
                  .backgroundColor(0xFFFFFF) 
                  .padding(10) 
                  .layoutWeight(1) 
                Line().width("100%").height(0.5).backgroundColor(0xeeeeee) 
              } 
            } 
            .height(100) 
          }, (item: string) => item) 
        } 
      }) 
    }

右侧上下滚动

 Scroll(this.hScroller) { 
      List({ initialIndex: 0, scroller: this.fullScroller }) { 
        ForEach(this.leftGroupArr, (item: string, index: number) => { 
          ListItemGroup({ header: this.rightStickyHeader(index) }) { 
            ForEach(this.arr, (item: string, index: number) => { 
              // 嵌套可左右滚动list作为上下滚动list的item 
              // 自定义组件 
  
            }, (item: string) => item) 
          } 
        }) 
      } 
    .listDirection(Axis.Vertical) 
  
    ...... 
    } 
  
    ...... 
  }

右侧上下滚动嵌套左右滚动

 List({ scroller: this.scroller }) { 
      ForEach(this.arr, (item: string, index: number) => { 
        ListItem() { 
          Text('' + index) 
            .height(100) 
            .width(RightItemWidth) 
            .fontSize(16) 
            .textAlign(TextAlign.Start) 
            .borderRadius(0) 
            .padding(10) 
            .backgroundColor(0xFFFFFF) 
        } 
      }, (item: string) => item) 
    } 
    .listDirection(Axis.Horizontal) 
  
    ......

1. 滚动联动

绑定滚动视图控制器

topRightScroller: Scroller = new Scroller() // 顶部区域左右滚动List 
fullScroller: Scroller = new Scroller() // 内容区域右侧上下滚动List 
tempScroller: Scroller = new Scroller() // 内容区域左侧上下滚动List 
hScroller: Scroller = new Scroller() // 内容区域右侧左右滚动Scroll 
@State scrollOffset: number = 0  // 监听hScroller

内容区域左右联动

内容区域左侧List属性回调，联动右侧List上下滚动同步

.onScrollFrameBegin((offset: number, state: ScrollState) => { 
      this.fullScroller.scrollTo({ 
        xOffset: 0, 
        yOffset: this.tempScroller.currentOffset().yOffset + offset, 
        animation: false 
      }) 
      return { offsetRemain: offset } 
    })

内容区域右侧List属性回调，联动左侧List上下滚动同步

.onScrollFrameBegin((offset: number, state: ScrollState) => { 
        this.tempScroller.scrollTo({ 
          xOffset: 0, 
          yOffset: this.fullScroller.currentOffset().yOffset + offset, 
          animation: false 
        }) 
        return { offsetRemain: offset } 
      })

内容区域左右滚动Scroll联动顶部固定位置右侧List滚动

.onScroll((scrollOffset: number, scrollState: ScrollState) => { 
      console.log('fxm' + scrollOffset) 
      this.rightHeaderOffset = this.hScroller.currentOffset().xOffset 
      this.topRightScroller.scrollTo({ xOffset: this.hScroller.currentOffset().xOffset, yOffset: 0 }) 
    })

核心代码

// xxx.ets 
import { LightWeightMap } from '@kit.ArkTS' 
const LeftItemWidth = 100 
const RightItemWidth = 100 
  
@Component 
struct ItemComponent { 
  private title: string = '' 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  private scroller: Scroller = new Scroller() 
  private static instance: ItemComponent; 
  
  public static getContext(): ItemComponent { 
    if (!ItemComponent.instance) { 
      ItemComponent.instance = new ItemComponent(); 
    } 
    return ItemComponent.instance; 
  } 
  @Builder 
  RightSingleLineList() { 
    List({ scroller: this.scroller }) { 
      ForEach(this.arr, (item: string, index: number) => { 
        ListItem() { 
          Text('' + index) 
            .height(100) 
            .width(RightItemWidth) 
            .fontSize(16) 
            .textAlign(TextAlign.Start) 
            .borderRadius(0) 
            .padding(10) 
            .backgroundColor(0xFFFFFF) 
        } 
      }, (item: string) => item) 
    } 
    .height('100%') 
    .width('100%') 
    .layoutWeight(1) 
    .listDirection(Axis.Horizontal) 
    .scrollBar(BarState.Off) 
    .friction(0.6) 
    .nestedScroll({ 
      scrollForward: NestedScrollMode.PARENT_FIRST, 
      scrollBackward: NestedScrollMode.PARENT_FIRST 
    }) 
    .divider({ strokeWidth: 0.5, color: 0xeeeeee }) // 每行之间的分界线 
    .edgeEffect(EdgeEffect.None) // 边缘效果设置为Spring 
    .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
      console.log('list scroll' + this.scroller.currentOffset().yOffset.toString()) 
    }) 
    .onScrollStop(() => { 
    }) 
  } 
  build() { 
    Column(){ 
      this.RightSingleLineList() 
      Line().width("100%").height(0.5).backgroundColor(0xeeeeee) 
    }.height(100) 
  } 
} 
  
  
@Entry 
@Component 
struct ListExample { 
  private scrollerMap: LightWeightMap<Object, Scroller> = new LightWeightMap(); 
  private leftGroupArr: string[] = ['基本信息', '车身', '发动机'] 
  private topRightArr: string[] = ['车型1', '车型2', '车型3', '车型4', '车型5', '车型6', '车型7', '车型8', '车型9', '车型10'] 
  @State arr: string[] = ['车长', '车高', '内饰', '轮毂', '系统', '电机', '马力', '音响', '悬架', '座椅通风', '自动泊车', '后备箱容积', '座椅记忆'] 
  @State scrollOffset: number = 0 
  fullScroller: Scroller = new Scroller() 
  hScroller: Scroller = new Scroller() 
  tempScroller: Scroller = new Scroller() 
  topRightScroller: Scroller = new Scroller() 
  @State rightHeaderOffset: number = 0 
  
  build() { 
    Column() { 
      this.contentBuilder() 
    } 
  } 
  
  @Builder 
  leftStickyHeader(title: string) { 
    Column() { 
      Text(title) 
        .height('100%') 
        .textAlign(TextAlign.Start) 
        .padding(10) 
        .width('100%') 
        .fontSize(15) 
        .fontWeight(FontWeight.Bolder) 
    }.height(60).width('100%').backgroundColor(0xEEEEEE) 
  } 
  
  @Builder 
  rightStickyHeader(index: number) { 
    Column() { 
      Text(index == 0 ? "官方配置>" : '●标配 ○选配 —无').height('100%') 
        .position({ x: 100 + this.rightHeaderOffset, y: 0 }) 
        .textAlign(TextAlign.End) 
        .width(150) 
    }.height(60).width('100%').backgroundColor(0xEEEEEE) 
  } 
  
  // 顶部固定 
  @Builder 
  topFixed() { 
    Row() { 
      Column() { 
        Text('共11款车').fontSize(15) 
        Toggle({ type: ToggleType.Switch, isOn: false }).height(30).width(50) 
        Text('只看差异').fontSize(15).fontWeight(FontWeight.Bolder) 
      } 
      .width(LeftItemWidth) 
      .height(100) 
      .backgroundColor(Color.White) 
      .justifyContent(FlexAlign.Center) 
      .alignItems(HorizontalAlign.Start) 
      .padding(10) 
  
      // 分割线 
      Line().height(100).width(0.5).backgroundColor(0xeeeeee) 
      // 对比列表 
      List({ scroller: this.topRightScroller }) { 
        ForEach(this.topRightArr, (item: string, index: number) => { 
          ListItem() { 
            Text(item) 
              .height(100) 
              .width(RightItemWidth) 
              .fontSize(16) 
              .textAlign(TextAlign.Start) 
              .borderRadius(0) 
              .padding(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      }.listDirection(Axis.Horizontal) 
      .divider({ strokeWidth: 0.5, color: 0xeeeeee }) 
      .scrollBar(BarState.Off) 
    }.height(100).width('100%').backgroundColor(Color.Pink) 
  
  } 
  
  @Builder 
  leftList(){ 
    List({scroller: this.tempScroller }) { 
      ForEach(this.leftGroupArr, (item: string, index: number) => { 
        ListItemGroup({ header: this.leftStickyHeader(item) }) { 
          ForEach(this.arr, (item: string, index: number) => { 
            ListItem() { 
              Column(){ 
                Text(item) 
                  .width(LeftItemWidth) 
                  .height('100%') 
                  .fontSize(16) 
                  .textAlign(TextAlign.Start) 
                  .backgroundColor(0xFFFFFF) 
                  .padding(10) 
                  .layoutWeight(1) 
                Line().width("100%").height(0.5).backgroundColor(0xeeeeee) 
              } 
            } 
            .height(100) 
          }, (item: string) => item) 
        } 
      }) 
    } 
    .sticky(StickyStyle.Header) 
    .listDirection(Axis.Vertical) // 排列方向 
    .scrollBar(BarState.Off) 
    .friction(0.6) 
    .divider({ strokeWidth: 0, color: 0xdddddd }) 
    .edgeEffect(EdgeEffect.None) // 边缘效果设置为Spring 
    .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST }) 
    .width(LeftItemWidth) 
    .visibility(Visibility.Visible) 
    .onScrollFrameBegin((offset: number, state: ScrollState) => { 
      this.fullScroller.scrollTo({ 
        xOffset: 0, 
        yOffset: this.tempScroller.currentOffset().yOffset + offset, 
        animation: false 
      }) 
      return { offsetRemain: offset } 
    }) 
  } 
  
  @Builder 
  rightScroll(){ 
    Scroll(this.hScroller) { 
      List({ initialIndex: 0, scroller: this.fullScroller }) { 
        ForEach(this.leftGroupArr, (item: string, index: number) => { 
          ListItemGroup({ header: this.rightStickyHeader(index) }) { 
            ForEach(this.arr, (item: string, index: number) => { 
              ItemComponent({ title: this.arr[index] }) 
            }, (item: string) => item) 
          } 
        }) 
      } 
      .sticky(StickyStyle.Header) 
      .listDirection(Axis.Vertical) 
      .scrollBar(BarState.Off) 
      .friction(0.6) 
      .edgeEffect(EdgeEffect.None) 
      .width('100%') 
      .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST }) 
      .onScrollFrameBegin((offset: number, state: ScrollState) => { 
        this.tempScroller.scrollTo({ 
          xOffset: 0, 
          yOffset: this.fullScroller.currentOffset().yOffset + offset, 
          animation: false 
        }) 
        return { offsetRemain: offset } 
      }) 
    } 
    .position({ x: LeftItemWidth, y: 0 }) 
    .onScroll((scrollOffset: number, scrollState: ScrollState) => { 
      console.log('fxm' + scrollOffset) 
      this.rightHeaderOffset = this.hScroller.currentOffset().xOffset 
      this.topRightScroller.scrollTo({ xOffset: this.hScroller.currentOffset().xOffset, yOffset: 0 }) 
    }) 
    .edgeEffect(EdgeEffect.None) // 边缘效果设置为Spring 
    .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.PARENT_FIRST }) 
    .width(RightItemWidth * 10 + 9 * 0.5) 
    .scrollable(ScrollDirection.Horizontal) 
    .backgroundColor(0xDCDCDC) 
    .padding({ top: 0 }) 
  
  } 
  
  @Builder 
  contentBuilder() { 
    Column() { 
      this.topFixed() 
      Row() { 
        this.leftList() 
        this.rightScroll() 
        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) 
  } 
}

实现效果

2024-05-27 20:54:33

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

滚动视图联动：实现多List联动滚动，横竖向滚动

订阅鸿蒙技术特刊，精选内容抢先看