目录

如何使子元素高度超出父元素限制且不影响其他布局

问题现象

父元素高度固定，子元素不设置高度时，如何设置可以使子元素高度随内容增加而变化，并向上超出父元素区域。

要求如下：

父组件高度固定，子组件不设置高度，子组件随着子组件内部元素增多而变高，允许超出父组件。
子元素内容超出限制后可以覆盖在父元素上面但不能影响其他布局。

示意图如下，下图中的图集描述需要点击向上展开，并且遮盖上方元素而不是把上方布局压缩：

点击放大

效果预览

文案内容少，点击Add按钮之前	点击Add按钮后子组件高度扩展到父组件，布局不变

背景知识

margin属性定义了元素边框外部的空白区域，给其赋值可以设置元素与元素之间的距离。如果设置负值，则两个元素会出现重叠现象。

解决方案

父元素高度不设置成一个小的高度，而是设置成上限，然后设置margin的top属性为负的（取值范围根据子组件内容自定义，top=子组件高度-父组件高度，如下面示例代码中，子组件高度为50，父组件高度为200，则top为-150），这样子组件高度变化时可以沿着父组件向上扩展，且不影响其他组件的布局。

完整示例参考如下：

@Entry
@ComponentV2
struct ParentAndSubComponent {
  @Local message: string = '01234567890123456789';

  build() {
    Column() {
      Column() {
        Button('Add')
          .backgroundColor('#ff0a59f7')
          .fontSize(25)
          .width('50%')
          .onClick(() => { // 点击该按钮内容增长，子组件高度扩展至其他组件，布局不变
            if (this.message.length >= 200) {
              return;
            }
            this.message = this.message.concat('0123456789');
          })
      }
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#ffe5e5ea')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])

      Column() {
        Scroll() {
          Text(this.message)
            .fontSize(25)
            .fontColor('#ff0a59f7')
        }
      }
      .justifyContent(FlexAlign.End)
      .height(200)
      .width('100%')
      .margin({
        top: -150
      })

      Column() {
        Button('Sub')
          .backgroundColor('#ff0a59f7')
          .fontSize(25)
          .width('50%')
          .onClick(() => { // 点击该按钮内容减少，子组件高度降低，不影响其他组件布局
            if (this.message.length <= 5) {
              return;
            }
            this.message = this.message.substring(0, this.message.length / 2);
          })
      }
      .width('100%')
      .height('30%')
      .justifyContent(FlexAlign.End)
      .backgroundColor('#ffd1d1d6')
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    }
  }
}