HarmonyOS Scroll组件嵌套RelativeContainer组件后 无法滑动？

Question

使用Scroll组件包裹RelativeContainer组件后，RelativeContainer组件里的内容无法滑动。截图中的代码什么都不改变，只把RelativeContainer组件替换成Column组件后，就可以滑动

build() {
  Scroll() {
    RelativeContainer() {
      Image($r("app.media.ic_home_banner"))
        .width("100%")
        .height(Dimension.LPX_290)
        .objectFit(ImageFit.Cover)
        .alignRules({
          top: {
            anchor: "__container__",
            align: VerticalAlign.Top
          }
        })

      Image($r("app.media.ic_home_change_hair_bg"))
        .id("change_hair_bg")
        .width("100%")
        .height(Dimension.LPX_274)
        .objectFit(ImageFit.Cover)
        .margin({
          top: Dimension.LPX_222
        })
        .alignRules({
          top: {
            anchor: "__container__",
            align: VerticalAlign.Top
          }
        })

      Image($r("app.media.ic_goddess_hairstyle_title"))
        .id("goddess_hairstyle_title")
        .width(Dimension.LPX_112)
        .height(Dimension.LPX_24)
        .objectFit(ImageFit.Fill)
        .alignRules({
          top: {
            anchor: "change_hair_bg",
            align: VerticalAlign.Top
          },
          left: {
            anchor: "__container__",
            align: HorizontalAlign.Start
          }
        })
        .margin({
          top: Dimension.LPX_34,
          left: Dimension.LPX_15
        })

      List() {
        ForEach(this.goddessHairstyleBeanList, (bean: HairstyleBean, index: number) => {
          this.HairstyleItemBuilder(bean, index)
        })
      }
      .id("goddess_hairstyle_list")
      .width("100%")
      .height(Dimension.LPX_150)
      .listDirection(Axis.Horizontal)
      .divider({
        strokeWidth: Dimension.LPX_13,
        startMargin: Dimension.LPX_15,
        endMargin: Dimension.LPX_15,
        color: $r("app.color.transparent")
      })
      .scrollBar(BarState.Off)
      .alignRules({
        top: { anchor: "goddess_hairstyle_title", align: VerticalAlign.Bottom }
      })
      .margin({
        top: Dimension.LPX_14
      })

      Image($r("app.media.ic_male_god_hairstyle_title"))
        .id("male_god_hairstyle_title")
        .width(Dimension.LPX_112)
        .height(Dimension.LPX_24)
        .objectFit(ImageFit.Fill)
        .alignRules({
          top: {
            anchor: "goddess_hairstyle_list",
            align: VerticalAlign.Bottom
          },
          left: {
            anchor: "__container__",
            align: HorizontalAlign.Start
          }
        })
        .margin({
          top: Dimension.LPX_20,
          left: Dimension.LPX_15
        })

      List() {
        ForEach(this.maleGodHairstyleBeanList, (bean: HairstyleBean, index: number) => {
          this.HairstyleItemBuilder(bean, index)
        })
      }
      .id("male_god_hairstyle_list")
      .width("100%")
      .height(Dimension.LPX_150)
      .listDirection(Axis.Horizontal)
      .divider({
        strokeWidth: Dimension.LPX_13,
        startMargin: Dimension.LPX_15,
        endMargin: Dimension.LPX_15,
        color: $r("app.color.transparent")
      })
      .scrollBar(BarState.Off)
      .alignRules({
        top: {
          anchor: "male_god_hairstyle_title",
          align: VerticalAlign.Bottom
        }
      })
      .margin({
        top: Dimension.LPX_14
      })


      Text("2333333333333333333333333333")
        .width("100%")
        .height("300lpx")
        .fontColor("#333333")
        .fontSize(Dimension.LPX_30)// .textAlign(TextAlign.Center)
        .backgroundColor("#FFFFFF")
        .alignRules({
          top: { anchor: "male_god_hairstyle_list", align: VerticalAlign.Bottom }
        })
        .margin({
          top: Dimension.LPX_14
        })
    }
    .width("100%")
    .height("auto")
  }
  .width("100%")
  .height("100%")
  .scrollBar(BarState.Off)
  .scrollable(ScrollDirection.Vertical)
}

Answer 1

.justifyContent(FlexAlign.Center)是居中显示的，如果要去掉居中，可以注释掉.justifyContent(FlexAlign.Center)。Scroll已经是100%了，再把column设为100%，就会把Scroll撑满，不建议这么做