鸿蒙之容器组件-Scroll

前言：

可滚动的容器组件，当子组件的布局尺寸超过Scroll的尺寸时，内容可以滚动。

当页面内容由多个区域组成，并且可以滚动时，推荐使用 Scroll

基本用法：

1. Scroll 设置尺寸
2. 设置 子组件（只支持一个子组件）
3. 设置滚动：

（1） 竖向滚动：子组件的高度超出 Scroll

（2） 横向滚动：子组件的宽度超出 Scroll，scrollable改为横向滚动

4. 根据需求调整属性

@Entry
@Component
struct Index  {
  build() {
    Column({ space: 10 }) {
      Text('竖向滚动')
        .fontSize(20)

      // Scroll 容器尺寸固定
      // 内容横向超出 Scroll 即可滚动
      Scroll() {
        Text()
          .width('100%')
          .height(400)
          .backgroundColor(Color.Pink)

      }
      .width('100%')
      .height(200)
      
      Text('横向滚动')
        .fontSize(20)

      // Scroll 容器尺寸固定
      // 内容横向超出 Scroll 即可滚动
      Scroll() {
        Text()
          .width('200%')
          .height(400)
          .backgroundColor(Color.Orange)
      }
      // 横向滚动
      .width('100%')
      .height(200)
      .scrollable(ScrollDirection.Horizontal)
    }
    .width('100%')
    .height('100%')
  }
}

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向：ScrollDirection.Vertical 纵向ScrollDirection.Horizontal 横向
scrollBar	BarState	设置滚动条状态。
scrollBarColor	string 、 number 、 Color	设置滚动条的颜色。
scrollBarWidth	string 、 number	设置滚动条的宽度
edgeEffect	value:EdgeEffect	设置边缘滑动效果。EdgeEffect.None 无EdgeEffect.Spring 弹簧EdgeEffect.Fade 阴影

Scroll 事件：

Scroll 组件提供了一些事件，让开发者可以在适当的时候添加逻辑

名称	功能描述
onDidScroll	Scroll滚动前触发的回调。

@Entry
@Component
struct Page01_Scroll {
  // 1. 创建控制器对象 new + Scroller 的方式创建
  // 不需要设置 @State
  scroller: Scroller = new Scroller()
  @State x: number = 0
  build() {
    Column({ space: 10 }) {
      Scroll(this.scroller) {
        Text()
          .width('100%')
          .height(400)
          .backgroundColor(Color.Pink)
      }
      .width('100%')
      .height(200)
      .onDidScroll(()=>{
        const x = this.scroller.currentOffset().yOffset
        console.log('',x)
      })
    }
    .width('100%')
    .height('100%')
  }
}