【ArkUI】Scroll组件不滚动

2023-12-25 20:42:14

原因

在使用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)
    }
  }
}

在这里插入图片描述

可以发现并未展示第二个元素,这是因为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。

文章来源:https://blog.csdn.net/owo_ovo/article/details/135207001
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。