HarmonyOS Scroll组件如何使用，才能让内容滚动？

Question

页面可能会比较长超出一个页面，想用Scroll控件让内容可以滚动。但是使用以下代码并不能滚动，请问我需要如何正确使用？可以给一个demo么？

Scroll(){
  Column() {
    // 很多控件
  }
  .width('100%')
  .height('100%')
}
.scrollBar(BarState.Off)

Answer 1

可参考以下demo：

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller(); //创建滚动条
  private arr: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'L', 'J', 'K', 'M', 'N'];  //创建字符串数组

  build() {
    Scroll(this.scroller) { //使用滚动条包裹Column,实现竖向滚动展示的效果
      Column() {  //Column容器实现子元素在竖直方向上的布局
        ForEach(this.arr, (item: string) => { //遍历字符串数组
          Text(item)
            .width('90%')
            .height(100)
            .backgroundColor(Color.Brown)
            .borderRadius(15)
            .fontSize(60)
            .fontColor(Color.Yellow)
            .textAlign(TextAlign.Center)
            .margin({ top: 10 })
        })
      }.width('100%')
    }
    .backgroundColor(0xDCDCDC)
    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
    .scrollBar(BarState.On) // 滚动条常驻显示
    .scrollBarColor(Color.Gray) // 滚动条颜色
    .scrollBarWidth(10) // 滚动条宽度
    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  }
}