问题现象

Scroll组件中嵌套RelativeContainer组件时，Scroll组件无法滚动。

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller;

  build() {
    // 无法滚动的Scroll
    Scroll() {
      RelativeContainer() {
        Column() {
          Text()
            .width('100%')
            .height('90%')
            .backgroundColor(Color.Gray)
          Text()
            .width('100%')
            .height('90%')
            .backgroundColor(Color.Blue)
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

效果预览

背景知识

• Scroll组件：可滚动的容器组件，当Scroll子组件的布局尺寸超过Scroll组件的尺寸时，内容可以滚动。
• RelativeContainer组件：相对布局组件，用于复杂场景中元素对齐的布局。

问题定位

RelativeContainer组件的默认高度是根据其父容器的高度确定，如果RelativeContainer组件没有设置具体的高度值，则会自动继承父组件的高度，而不是子组件高度。由此可见Scroll组件的子组件是RelativeContainer组件时，且RelativeContainer组件未设置高于Scroll组件高度时，会违反Scroll组件的子组件总高度必须大于Scroll组件高度的滚动条件，导致无法滚动。

说明

RelativeContainer组件的width属性、height属性参数设置"auto"时，表示RelativeContainer组件宽度和高度自适应子组件的宽度和高度。

分析结论

Scroll组件中嵌套RelativeContainer组件时，Scroll组件无法滚动的原因是：RelativeContainer组件默认继承Scroll组件的高度，导致RelativeContainer组件高度无法超过Scroll组件高度，进而导致Scroll组件无法滚动。

修改建议

• 方案一：RelativeContainer组件height属性参数设置"auto"，并保证RelativeContainer子组件的高度高于Scroll组件高度。

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller;

  build() {
    Scroll() {
      RelativeContainer() {
        Column() {
          Text()
            .width('100%')
            .height('90%')
            .backgroundColor(Color.Gray)
          Text()
            .width('100%')
            .height('90%')
            .backgroundColor(Color.Blue)
        }
      }
      .height('auto') // 自适应子组件高度
      .width('auto') // 自适应子组件宽度
    }
    .width('100%')
    .height('100%')
  }
}

• 方案二：Flex组件、Column组件代替RelativeContainer组件。以Column组件为例，Column组件会自适应子组件高度。

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller;

  build() {
    // Column组件代替RelativeContainer组件
    Scroll() {
      Column() {
        Text()
          .width('100%')
          .height('90%')
          .backgroundColor(Color.Gray)
        Text()
          .width('100%')
          .height('90%')
          .backgroundColor(Color.Blue)
      }
    }
    .width('100%')
    .height('100%')
  }
}

• 方案三：RelativeContainer组件嵌套Scroll组件。

@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller;

  build() {
    // RelativeContainer组件嵌套Scroll组件
    RelativeContainer() {
      Scroll() {
        Column() {
          Text()
            .width('100%')
            .height('90%')
            .backgroundColor(Color.Gray)
          Text()
            .width('100%')
            .height('90%')
            .backgroundColor(Color.Blue)
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}

说明

由于方案二、方案三会更改布局，推荐使用方案一。