鸿蒙笔记--Scroll

        这一节了解一下Scroll控件,在鸿蒙（HarmonyOS）开发中，Scroll控件是一个重要的可滚动容器组件，它允许在子组件的布局尺寸超过父组件尺寸时提供滚动功能。

scrollable：
含义：控制Scroll组件的滚动方向。
可选值：
ScrollDirection.Vertical：垂直滚动（默认值）。
ScrollDirection.Horizontal：水平滚动。

scrollBar：
含义：设置滚动条的状态。
可选值：
BarState.Auto：自动显示滚动条（默认值）。
BarState.On：始终显示滚动条。
BarState.Off：始终不显示滚动条。

scrollBarColor：
含义：设置滚动条的颜色。
scrollBarWidth：
含义：设置滚动条的宽度。
edgeEffect：
含义：设置滚动边缘的效果。
可选值：
EdgeEffect.None：无效果。
EdgeEffect.Spring：弹簧效果。
EdgeEffect.Fade：阴影效果。

enableScrollInteraction（API 10+）：
含义：设置是否支持滚动手势。
可选值：
true：支持滚动手势（默认值）。
false：不支持滚动手势，但不影响通过控制器接口进行的滚动。
friction（API 10+）：
含义：设置滚动时的摩擦力，影响滚动的速度和惯性。

栗子:

@Entry @Component struct ArkUITest {

  build() {
    Scroll() {
      Text('Text1')
        .fontSize(26)
        .size({width: 180, height: 40}) // 子组件的高度小于Scroll高度，不会触发滚动
        .backgroundColor('#aabbcc')
    }
    .width('100%')
    .height(100)
    .backgroundColor(Color.Pink)
  }
}

@Entry @Component struct ArkUITest {
  build() {
    Scroll() {// Scroll没有设置滚动方向，默认竖直方向滚动
      Column() {
        Text('Text1')
          .fontSize(26)
          .size({width: 180, height: 90})
          .backgroundColor('#aabbcc')
        Text('Text2')
          .fontSize(26)
          .size({width: 180, height: 90})
          .backgroundColor('#bbccaa')
        Text('Text3')
          .fontSize(26)
          .size({width: 180, height: 90})
          .backgroundColor('#ccaabb')
        Text('Text4')
          .fontSize(26)
          .size({width: 180, height: 90})
          .backgroundColor('#abcabc')
      }
      .width('100%')
    }
    .width(230)
    .height(200)
    .backgroundColor(Color.Pink)
  }
}

控制器：
可以通过创建Scroller的实例并将其绑定给Scroll组件来控制滚动。
控制器提供了多种方法来控制滚动，如scrollTo（滚动到指定位置）、scrollEdge（滚动到容器边缘）、scrollPage（滚动到下一页或上一页）等。
滚动事件：
onScroll（API小于12时使用）：滚动事件回调，返回滚动时水平、竖直方向偏移量。
onWillScroll（API 12及以上时使用）：滚动回调，返回滚动后的偏移量。

栗子:

@Entry
@Component
struct ScrollWithController {
    scroller: Scroller = new Scroller();
    @State isActive: boolean = false;
 
    build() {
        Column() {
            Scroll(this.scroller) {
                Column() {
                    // 放置多个子组件
                    Text('Text1')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#aabbcc')
          Text('Text2')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#bbccaa')
          Text('Text3')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#ccaabb')
          Text('Text4')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#abcabc')
          Text('Text5')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#abcabc')
          Text('Text6')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#abcabc')
          Text('Text7')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#abcabc')
          Text('Text8')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#aabbcc')
          Text('Text9')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#bbccaa')
          Text('Text10')
            .fontSize(26)
            .size({width: 180, height: 120})
            .backgroundColor('#ccaabb')
                }
            }
            .scrollBar(BarState.On)
            .scrollBarWidth(5)
            .scrollBarColor(Color.Black)
            .edgeEffect(EdgeEffect.Fade)
            .onWillScroll(() => {
                const yOffset = this.scroller.currentOffset().yOffset;
                if (yOffset >= 400) {
                    this.isActive = true;
                } else {
                    this.isActive = false;
                }
            })
            .width('100%')
            .height('100%');
 
            if (this.isActive) {
                Row({ space: 10 }) {
                    Image($r('app.media.ic_jd_rocket'))
                        .height(30)
                        .width(30)
                        .onClick(() => {
                            this.scroller.scrollEdge(Edge.Top);
                        });
                }
                .padding(5)
                .width(40)
                .height(40)
                .borderRadius(20)
                .backgroundColor(Color.White)
                .margin({ bottom: 90, right: 30 });
            }
        }
    }
}

分析:这个示例中，我们创建了一个Scroll组件，并通过控制器来控制滚动。同时，我们还使用了onWillScroll事件来监听滚动偏移量，并根据偏移量来显示或隐藏一个返回顶部的按钮。当用户点击返回顶部按钮时，控制器会将Scroll组件滚动到顶部。