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

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

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

```javascript
[@Entry](/user/Entry)
[@Component](/user/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 },
          // bottom: {anchor: "row2", align: VerticalAlign.Bottom}
        })
        .id("row1")

        //让Row2自适应高度
        Row() {
          Text('row2')
          // .layoutWeight(1)
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .backgroundColor("#FF6633")
        .layoutWeight(1)
        .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({
          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)
  }
}

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

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

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

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

  1. 设置子组件的高度为自适应：在XML布局文件中，为需要自适应高度的子组件设置height属性为match_parent。但需要注意的是，在RelativeContainer中，直接使用match_parent可能不会达到预期效果，因为RelativeContainer的子组件通常是根据其他组件的位置或父容器的边界来定位的。

  2. 使用布局约束：利用RelativeContainer的布局约束功能，通过left_of、right_of、top_of、bottom_of、align_parent_top、align_parent_bottom等属性来定义子组件的位置。当子组件的上下边界被正确约束时，其高度会根据这些约束自适应调整。

  3. 避免固定高度：确保不要为子组件设置固定的height值，这样它们才能根据父容器或其他子组件的位置动态调整高度。

  4. 代码动态设置：如果需要在代码中动态设置子组件的高度，可以通过获取父容器或相关子组件的布局参数，并据此调整目标子组件的高度。

如果以上方法仍然无法解决您的问题，可能是布局逻辑或组件属性设置上有特殊需求。此时，请直接联系官网客服以获取更专业的帮助。官网地址是：https://www.itying.com/category-93-b0.html

回到顶部