HarmonyOS 子组件超过父组件的范围？

Question

Stack() {
  Image("")
    .width('100%')
    .height('100%')
    .backgroundColor('#1a0000ff')
    .backgroundImageSize(ImageSize.Cover)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

  RelativeContainer() {
    /**
     * 最大，186 * 23.5
     * 最小，176 * 22.5
     */
    Image($r('app.media.bg_version'))
      .width(LOGIN_WIDTH_MAX)
      .height(this.logoHeight)
      .backgroundColor('#2aff0000')
      .margin({ top: this.commonMarginTop })

    Image($r('app.media.bg_version'))
      .width(33)
      .height(33)
      .backgroundColor('#3aff0000')
      .margin({ top: this.commonMarginTop })
      .alignRules(this.AlignRue)

    /**
     * 375
     * 最大，309 * 30，宽：1 top53.5，left14
     * 最小，130 * 28，宽：0.375 top17，left202.5
     *
     * top = 53.5 ~ 17 = factorChange * (17-53.5) + 53.5
     */
    Row() {

    }
    .width(this.searchWidth + '%')
    .height(this.searchHeight)
    .backgroundColor('#3aff0000')
    .margin({ left: this.searchMarginLeft, top: this.searchMarginTop, })
  }
  .width('100%')
  .height('100%')
  .backgroundColor('#1a00ff00')
  .padding({ left: 14, right: 14 })
  .margin({ left: 14, right: 14, top: 34 })
}
.width('100%')
.height(this.searchLayoutHeight)
.backgroundColor('#ff0000')

这种布局中，子组建超过了父布局的红色

Answer 1

如想RelativeContainer的高度自适应子组件的高度，可以给RelativeContainer的高度设置为.height(‘auto’)，或想让子组件不超过父组件的范围，可以给父组件RelativeContainer添加固定的高度值并设置.clip(true)属性。