【鸿蒙开发】系统组件Scroll

Scroll组件

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

支持单个子组件。

接口：

Scroll(scroller?: Scroller)

参数：

参数名	参数类型	必填	参数描述
scroller	Scroller	否	可滚动组件的控制器。用于与可滚动组件进行绑定。

属性：

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向。 默认值：ScrollDirection.Vertical
scrollBar	BarState	设置滚动条状态。 默认值：BarState.Auto 说明： 如果容器组件无法滚动，则滚动条不显示。 如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。
scrollBarColor	string | number | Color	设置滚动条的颜色。
scrollBarWidth	string | number	设置滚动条的宽度，不支持百分比设置。 默认值：4 单位：vp 说明： 如果滚动条的宽度超过其高度，则滚动条的宽度会变为默认值。
edgeEffect	EdgeEffect	设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 默认值：EdgeEffect.None

ScrollDirection：

名称	描述
Horizontal	仅支持水平方向滚动。
Vertical	仅支持竖直方向滚动。
None	不可滚动。
Free(deprecated)	支持竖直或水平方向滚动。 从API version 9开始废弃。

示例

@Entry
@Component
struct APage {
  build() {
    Scroll() {
      Column() {
        Row() {
          Text("111")
        }
        .width("100%")
        .height(500)
        .backgroundColor(Color.Pink)

        Row() {
          Text("222")
        }
        .width("100%")
        .height(500)
        .backgroundColor(Color.Red)

        Row() {
          Text("333")
        }
        .width("100%")
        .height(500)
        .backgroundColor(Color.Orange)
      }
    }
    .height("100%")
    .width("100%")
  }
}