鸿蒙之容器组件-Scroll

131 阅读1分钟

前言:

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

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

基本用法:

  1. Scroll 设置尺寸
  2. 设置 子组件(只支持一个子组件)
  3. 设置滚动:

(1) 竖向滚动:子组件的高度超出 Scroll

(2) 横向滚动:子组件的宽度超出 Scroll,scrollable改为横向滚动

  1. 根据需求调整属性
@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%')
  }
}

image.png

名称参数类型描述
scrollableScrollDirection设置滚动方向:ScrollDirection.Vertical 纵向ScrollDirection.Horizontal 横向
scrollBarBarState设置滚动条状态。
scrollBarColorstring 、 number 、 Color设置滚动条的颜色。
scrollBarWidthstring 、 number设置滚动条的宽度
edgeEffectvalue:EdgeEffect设置边缘滑动效果。EdgeEffect.None 无EdgeEffect.Spring 弹簧EdgeEffect.Fade 阴影

Scroll 事件:

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

名称功能描述
onDidScrollScroll滚动前触发的回调。
@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%')
  }
}

image.png