HarmonyOS 鸿蒙Next中无解,如何在父元素高度固定,子元素不设置高度时,子元素被内部元素撑开并向上超出父元素区域

HarmonyOS 鸿蒙Next中无解,如何在父元素高度固定,子元素不设置高度时,子元素被内部元素撑开并向上超出父元素区域 场景:用于文字过多时,向上展开,下图中的图集描述需要点击向上展开,并且遮盖上方元素而不是把上方布局压缩。

cke_940.png

假设图集描述区域收起时高度是60,整个页面用Column布局,目前试过的方案有:

  1. 图集描述区采用Flex布局,height56,方向纵向Reverse,clip:false, 内部元素shrink 0
@Entry
@Component
struct Index {
  @State message: string = '很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字很长很长的文字'

  build() {
    Column {
      Column {
        Text('顶部按钮区')
      }.height(56).width('100%').backgroundColor(Color.Gray)

      Column {
        Text('中间图集swiper区域')
      }.layoutWeight(1).width('100%').backgroundColor(Color.Yellow)

      Column {
        Text('下方切换图片缩略图区')
      }.height(60).width('100%').backgroundColor(Color.Blue)

      // 文字描述区,需要能让内部文字向上超出这个Flex
      Flex({direction: FlexDirection.ColumnReverse, wrap:FlexWrap.NoWrap}) {
        Scroll(){
          Text(this.message)
        }
        .scrollable(ScrollDirection.Vertical)
        .constraintSize({maxHeight: 160})
        .flexGrow(1)
        .flexShrink(0)
      }
      .width('100%')
      .height(56)
      .clip(false)
      .backgroundColor(Color.Red)

      Column {
        Text('底部按钮区')
      }.height(64).backgroundColor(Color.Green).width('100%')
    }
  }
}
  1. 图集描述区用Relative,禁止clip,内部元素左下方对齐, 不设置高度
  2. 图集描述区用stack,height56,禁止clip,堆叠左下方开始,内部元素不设置高度

总之现在就是缺一个父元素高度固定,子元素能被其内部高度撑开到超出父组件高度的方案,子元素不能设置高度(可以设置最大高度)


更多关于HarmonyOS 鸿蒙Next中无解,如何在父元素高度固定,子元素不设置高度时,子元素被内部元素撑开并向上超出父元素区域的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS 鸿蒙Next中无解,如何在父元素高度固定,子元素不设置高度时,子元素被内部元素撑开并向上超出父元素区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,若父元素高度固定且子元素未设置高度,子元素被内部元素撑开并向上超出父元素区域,可通过以下方式实现:

  1. 使用clipBehavior: Clip.none允许子元素超出父元素区域。
  2. 子元素使用AlignPositioned进行定位,确保其向上扩展。
  3. 父元素使用OverflowBoxTransform,允许子元素超出父元素边界。

示例代码:

Container(
  height: 200, // 父元素固定高度
  clipBehavior: Clip.none, // 允许子元素超出
  child: OverflowBox(
    alignment: Alignment.topCenter,
    child: Align(
      alignment: Alignment.topCenter,
      child: Container(
        child: Text('子元素内容'),
      ),
    ),
  ),
)
回到顶部