HarmonyOS 鸿蒙Next RelativeContainer怎么让子组件自适应高度

发布于 1周前 作者 ionicwang 来自 鸿蒙OS

HarmonyOS 鸿蒙Next RelativeContainer怎么让子组件自适应高度 问题描述：一个列Column包含三个组件ABC，RelativeContainer组件高度固定，上下AC组件高度固定，中间B组件动态适配高度。

代码如下：

@Entry
@Component
struct Index {
  build() {
    Column() {
      /**
       * 列：三个元素，上下固定高度，中间扩展自适应高度
       */
      RelativeContainer() {
        Row(){Text('row1')}.justifyContent(FlexAlign.Center)
        .width(100).height(100)
        .backgroundColor("#FF3333")
        .alignRules({
          top: {anchor: "__container__", align: VerticalAlign.Top},
          right: {anchor: "__container__", align: HorizontalAlign.Center}
        })
        .id("row1")

        //让Row2自适应高度
        Row(){
          Text('row2')
            // .layoutWeight(1)
        }.justifyContent(FlexAlign.Center)
        .width(100)
        .backgroundColor("#FF6633")
        .layoutWeight(1)
        .alignRules({
          top: {anchor: "row1", align: VerticalAlign.Bottom}
        })
        .id("row2")

        Row(){Text('row3')}.justifyContent(FlexAlign.Center)
        .width(100).height(100)
        .backgroundColor("#FFCC00")
        .alignRules({
          top: {anchor: "row2", align: VerticalAlign.Bottom},
          bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
        })
        .id("row3")
      }
      .width(300)
      .height(600)
      .margin(20)
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
    .backgroundColor(Color.Grey)
  }
}

效果如下：

cke_7962.png

问题：如何让row2适配剩余高度，row3在底部？？？

回答问题的朋友有条件的话，最好先自测下，看看效果哈😊


更多关于HarmonyOS 鸿蒙Next RelativeContainer怎么让子组件自适应高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
8 回复

正确示例：RelativeContainer放在Column组件里面！！！ 不固定宽高的组件依赖固定宽高的，不要依赖不确定宽高的组件！！！

@Entry
@Component
struct Index {
  build() {
    Column() {
      /**
       * 列：三个元素，上下固定高度，中间扩展自适应高度
       */
      RelativeContainer() {
        Row() {
          Text('row1')
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .height(100)
        .backgroundColor("#FF3333")
        .alignRules({
          right: { anchor: "__container__", align: HorizontalAlign.Center },
          top: { anchor: "__container__", align: VerticalAlign.Top },
          /**
           * 不要依赖不确定宽高的组件！！！ 如row2高度不确定
           */
          // bottom: {anchor: "row2", align: VerticalAlign.Bottom}
        })
        .id("row1")

        //让Row2自适应高度
        Row() {
          Text('row2')
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .backgroundColor("#FF6633")
        .alignRules({
          /**
           * 不固定宽高的组件依赖固定宽高的，不要依赖不确定宽高的组件！！！
           */
          top: { anchor: "row1", align: VerticalAlign.Bottom },
          bottom: { anchor: "row3", align: VerticalAlign.Top }
        })
        .id("row2")

        Row() {
          Text('row3')
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .height(100)
        .backgroundColor("#FFCC00")
        .alignRules({
          /**
           * 不要依赖不确定宽高的组件！！！ 如row2高度不确定
           */
          // top: {anchor: "row2", align: VerticalAlign.Bottom},
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
        })
        .id("row3")
      }
      .width(300)
      .height(600)
      .margin(20)
      .border({ width: 2, color: "#6699FF" })
    }
    .height('100%')
    .backgroundColor(Color.Grey)
  }
}

更多关于HarmonyOS 鸿蒙Next RelativeContainer怎么让子组件自适应高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/adaptive-layout-V5

仅当父容器是Row、Column或者Flex时，layoutWeight属性才会生效,所以你这边不生效

@Entry
@Component
struct Test {
  build() {
    RelativeContainer() {
      Column() {
        /**
         * 列：三个元素，上下固定高度，中间扩展自适应高度
         */
        Row() {
          Text('row1')
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .height(100)
        .backgroundColor("#FF3333")
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          right: { anchor: "__container__", align: HorizontalAlign.Center }
        })
        .id("row1")

        //让Row2自适应高度
        Row() {
          Text('row2')
          // .layoutWeight(1)
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .backgroundColor("#FF6633")
        .layoutWeight(1)
        .alignRules({
          top: { anchor: "row1", align: VerticalAlign.Bottom }
        })
        .id("row2")

        Row() {
          Text('row3')
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .height(100)
        .backgroundColor("#FFCC00")
        .alignRules({
          top: { anchor: "row2", align: VerticalAlign.Bottom },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
        })
        .id("row3")
      }
      .width(300)
      .height(600)
      .margin(20)
      .border({ width: 2, color: "#6699FF" })
    }
    .height('100%')
    .backgroundColor(Color.Grey)
  }
}

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

可以动态适配row2的高度，但是这样调整好像失去了相对布局RelativeContainer的意义，是靠layoutWeight权重来扩展row2的高度的。

我试了下，把相对布局RelativeContainer和alignRules去掉，row2仍是可以动态扩展的，这是利用的layoutWeight权重实现的。单纯利用RelativeContainer能达到这个效果吗？

这种当前好像不行吧，你这种场景只能通过动态计算的方式去计算出row2的高度手动赋值了，

总的来说，HarmonyOS是一款非常优秀的操作系统，期待它能在未来带给我们更多惊喜！

不知道，感觉和iOS和安卓的相对布局还不一样，iOS的相对布局时可以达到这个效果的。

在HarmonyOS鸿蒙系统中，要让RelativeContainer的子组件自适应高度，可以通过设置子组件的布局参数来实现。具体步骤如下：

  1. 设置子组件的布局宽度和高度为MatchParent或WrapContent：

    • 如果希望子组件的宽度和高度都自适应其父容器，可以将宽度和高度都设置为MatchParent。但通常为了高度自适应，我们会将高度设置为WrapContent，这样子组件的高度会根据其内容自动调整。

  2. 使用RelativeAlign属性：

    • 在RelativeContainer中，通过RelativeAlign属性来定义子组件相对于父容器的位置和对齐方式。这个属性不会影响子组件的大小，但可以确保子组件在容器中的正确布局。

  3. 确保没有固定高度限制：

    • 检查是否有其他地方（如样式或代码）对子组件设置了固定高度，如果有，需要将其移除或调整为自适应值。

  4. 利用布局权重（如果适用）：

    • 在某些情况下，如果RelativeContainer内部有多个子组件且需要它们按比例分配空间，可以考虑使用权重（虽然RelativeContainer本身不支持权重，但可以考虑替换为支持权重的布局容器，如LinearLayout）。

如果上述方法仍然无法解决问题，可能是因为具体的布局场景或代码实现有特殊之处。此时，请直接联系官网客服以获取更专业的帮助。官网地址是：https://www.itying.com/category-93-b0.html

回到顶部