【ArkUI】Scroll组件不滚动

原因

在使用Scroll组件时,明明设置了滚动方向,内容也超过了视口范围,但是就是不能滚动,这是因为Scroll容器的子组件设置了width或height,Row不要设置width,Column不要设置height。

首先需要确保Scroll容器中只包含一个组件

@Entry
@Component
struct ScrollDemo {
  build() {
    Scroll(){
      Text('111').width('100%').height(200).backgroundColor(Color.Pink)
      Text('222').width('100%').height(1600).backgroundColor(Color.Orange)
    }
  }
}

【ArkUI】Scroll组件不滚动_第1张图片

可以发现并未展示第二个元素,这是因为Scroll容器中只允许一个子组件,那么使用一个容器组件将多个组件包裹即可。

@Entry
@Component
struct ScrollDemo {
  build() {
    Scroll(){
      Column(){
        Text('111').width('100%').height(200).backgroundColor(Color.Pink)
        Text('222').width('100%').height(1600).backgroundColor(Color.Orange)
      }
    }
  }
}

其次确保子组件不要设置width或height

Row容器主轴方向为水平方向,不要设置width。
Column容器主轴方向为竖直方向,不要设置height。

你可能感兴趣的:(Harmony,#,ArkUI,harmonyos,前端)