HarmonyOS 列表头部header折叠及标题栏渐变效果是否有示例代码

参考示例如下：

@Entry
@Component
struct Page {
  @State arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  @State currentIndex: number = 0
  private tabController: TabsController = new TabsController()
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State topHeight: number = 0
  @State isShow: boolean = false
  build() {
    Scroll() {
      Column() {
        // 顶部卡片
        Stack({ alignContent: Alignment.Bottom }) {
          Row() {
            Text('背景卡片').fontSize(20).layoutWeight(1)
          }
          .align(Alignment.Top)
          .borderRadius(5)
          .height("100%")

          // 待显示的
          Column() {
            TextInput({ text: '', placeholder: '请输入' })
              .placeholderColor(Color.White)
          }
          .visibility(this.isShow ? Visibility.Visible : Visibility.Hidden)
          .width('100%')
          .height(45)
          .backgroundColor('#333333')
          .onSizeChange((old, newV) => {
            this.topHeight = Number(newV.height)
          })
        }
        .height(150)
        .backgroundColor('#ffcae9ca')

        // tab内容
        Column() {
          Tabs({ barPosition: BarPosition.Start, controller: this.tabController }) {
            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(0, '手机'))

            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(1, '宽带'))

            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(2, '家庭'))

            TabContent() {
              this.listControllerBuilder()
            }.tabBar(this.tabBuilder(3, '附近'))
          }
          .vertical(false)
          .barMode(BarMode.Fixed)
          .backgroundColor('#F1F3F5')
          .animationDuration(400)
          .onChange((index: number) => {
            this.currentIndex = index
          })
        }
        .width('100%')
        .height(`calc(100% - ${this.topHeight}vp)`)
      }
    }
    .onScrollEdge((edg) => {
      if (edg === 2) {
        this.isShow = true
      }
    })
    .onWillScroll((x, y) => {
      if (y !== 0) {
        this.isShow = false
      }
    })
  }

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
    }.width('100%')
  }

  @Builder
  listControllerBuilder() {
    List({ space: 20, initialIndex: 0 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text('' + item)
            .width('100%')
            .height(100)
            .fontSize(16)
            .textAlign(TextAlign.Center)
            .borderRadius(10)
            .backgroundColor(0xFFFFFF)
        }
      }, (item: string) => item)
    }
    .listDirection(Axis.Vertical) // 排列方向
    .scrollBar(BarState.Off)
    .friction(0.6)
    .chainAnimation(false)
    .edgeEffect(EdgeEffect.Spring) //配合EdgeEffect.Spring可以触发list回弹效果
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.SELF_FIRST
    })
    .onScrollIndex((firstIndex: number, lastIndex: number, centerIndex: number) => {
    })
    .onAppear(() => {
    })
    .width('90%')
  }
}
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.