【鸿蒙开发】系统组件Scroll

鸿蒙开发arkui组件，scroll组件

d312697510

949人浏览 · 2024-04-07 18:11:41

d312697510 · 2024-04-07 18:11:41 发布

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%")
  }
}