HarmonyOS 拖动页面listview上下几条ite收缩的动效实现

//1、index.ets  
@Entry  
@Component  
struct Index {  
  private scrollerForScroll: Scroller = new Scroller();  
  private scrollerForList: Scroller = new Scroller();  
  @State numbers1: string[] = ['1', '2', '3', '4', '5']  
  @State numbers2: string[] = ['1', '2', '3', '4', '5', '6', '7']  
  @State curSelectedRow: number = 2;  
  @State curSelectedColumn: number = 3;  
  @State textHeight: number = 50;  
  
  getTopNums() {  
    return this.numbers1.filter((v: string, index1: number) => {  
      return index1 <= this.curSelectedRow;  
    })  
  }  
  getBottomNums() {  
    return this.numbers1.filter((v: string, index1: number) => {  
      return index1 > this.curSelectedRow;  
    })  
  }  
  @Builder  
  myBuilder(number1: string[]) {  
    Column() {  
      ForEach(number1, (v: string) => {  
        Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.NoWrap }) {  
          ForEach(this.numbers2, (item: string, index2: number) => {  
            Text(v + item)  
              .width(this.textHeight)  
              .height(this.textHeight)  
              .textAlign(TextAlign.Center)  
              .borderRadius(40)  
              .borderWidth(this.curSelectedRow === Number(v) - 1 && this.curSelectedColumn === index2 ? 1 : 0)  
              .onClick(() => {  
                this.curSelectedRow = Number(v) - 1;  
                this.curSelectedColumn = index2;  
              })  
          })  
        }  
        .borderWidth({ bottom: 1 })  
        .width('100%')  
        .backgroundColor(Color.Pink)  
      })  
    }  
  }  
  build() {  
    Stack({ alignContent: Alignment.Top }) {  
      Scroll(this.scrollerForScroll) {  
        Column() {  
          // list view1  
          this.myBuilder(this.getTopNums());  
          List({ space: 10, scroller: this.scrollerForList }) {  
            ListItem() {  
              // list view2  
              this.myBuilder(this.getBottomNums());  
            }.width("100%")  
            ListItem() {  
              Column() {  
                Text('content top')  
                Text('content bottom')  
              }  
              .justifyContent(FlexAlign.SpaceBetween)  
              .height('100%')  
              .width('100%')  
              .backgroundColor(Color.White)  
              .borderRadius(10)  
            }.width("100%").height('100%')  
          }  
          .edgeEffect(EdgeEffect.None)  
          .scrollBar(BarState.Off)  
          .nestedScroll({ scrollForward: NestedScrollMode.PARENT_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST })  
          .width("100%")  
          // 吸顶效果  
          .height(`calc(100% - ${this.textHeight}vp)`)  
        }  
        .padding({ left: 10, right: 10, bottom: 20 })  
      }  
      .scrollBar(BarState.Off)  
      .width("100%")  
      .height("100%")  
      .onScrollFrameBegin(offset => {  
        if (this.scrollerForList.currentOffset().yOffset > 0) {  
          this.scrollerForList.scrollBy(0, offset);  
          return { offsetRemain: 0 };  
        }  
        return { offsetRemain: offset };  
      })  
    }  
    .width('100%')  
    .height('100%')  
    .backgroundColor(Color.Gray)  
  }  
}
//2、index.ets  
@Entry  
@Component  
struct Index {  
  private numRows: string[] = ['1', '2', '3', '4', '5'];  
  private numColumns: string[] = ['1', '2', '3', '4', '5', '6', '7'];  
  @State btnText: string = '收缩';  
  @State isExpand: boolean = true;  
  @State curSelectedRow: number = 2;  
  @State curSelectedColumn: number = 3;  
  @State textHeight: number = 40;  
  build() {  
    Column({ space: 10 }) {  
      ForEach(this.numRows, (v: string, index1: number) => {  
        Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.NoWrap }) {  
          ForEach(this.numColumns, (item: string, index2: number) => {  
            Text(v + item)  
              .width(40)  
              .height(this.curSelectedRow === index1 ? 40 : this.textHeight)  
              .textAlign(TextAlign.Center)  
              .borderRadius(40)  
              .borderWidth(this.curSelectedRow === index1 && this.curSelectedColumn === index2 ? 1 : 0)  
              .onClick(() => {  
                this.curSelectedRow = index1;  
                this.curSelectedColumn = index2;  
              })  
          })  
        }  
        .width('100%')  
        .backgroundColor(Color.Pink)  
      })  
      Button(this.btnText).onClick(() => {  
        this.isExpand = !this.isExpand;  
        this.btnText = this.isExpand ? '收缩' : '展开';  
        animateTo({  
          duration: 300,  
          curve: Curve.Linear  
        }, () => {  
          this.textHeight = this.textHeight == 0 ? 40 : 0  
        })  
      })  
    }.width('100%')  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.