HarmonyOS RelativeContainer如何使其高度根据内容变化，而不是100%

RelativeContainer布局内无论放多高的内容，高度都是100%，如何使高度跟随内容变化？

RelativeContainer() {
  Text("test")
    .width('100%')
    .backgroundColor(Color.Green)
}.width('100%')
.backgroundColor(Color.Orange)

HarmonyOS

zbw_apple

3天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

RelativeContainer组件无法实现自适应的效果，如果需要有堆叠效果的话，可以使用Stack组件在Stack里面写入可能需要堆叠的内容，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5

参考示例：

@Entry
@Component
struct RelativeDemo {
  build() {
    Stack({ alignContent: Alignment.Top }) {
      Layer1()
        .alignRules({
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          top: { anchor: '__container__', align: VerticalAlign.Top },
          right: { anchor: '__container__', align: HorizontalAlign.End },
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
        })

      Layer2()
        .alignRules({
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          top: { anchor: '__container__', align: VerticalAlign.Top },
          right: { anchor: '__container__', align: HorizontalAlign.End },
        })
    }
    .backgroundColor(Color.Blue)
    .width('100%')
    .height('100%')
  }
}

@Component
struct Layer1 {
  build() {
    RelativeContainer().backgroundColor(Color.Red)
  }
}

@Component
struct Layer2 {
  build() {
    Column() {
      Item().alignRules({
        top: { anchor: '__container__', align: VerticalAlign.Top },
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        right: { anchor: '__container__', align: HorizontalAlign.End },
      })
    }
    .width('100%')
    .padding({
      bottom: 30,
      top: 30,
      left: 10,
      right: 10
    })
    .backgroundColor(Color.Yellow)
  }
}

@Component
struct Item {
  build() {
    Column() {
      Text('我是子控件')
        .fontColor(Color.Black)
    }
    .width('100%')
    .backgroundColor("#FFFFFFFF")
    .padding({
      left: "12lpx",
      right: "12lpx",
      top: "16lpx",
      bottom: "12lpx",
    })
  }
}

API11开始在RelativeContainer组件中，width、height设置auto表示自适应子组件。可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5#示例3

3天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS RelativeContainer如何使其高度根据内容变化，而不是100%

订阅鸿蒙技术特刊，精选内容抢先看