HarmonyOS 元素高度排版异常

Column元素预期渲染的高度应该为300px,实际渲染的高度不足300px。

@Entry
@Component
struct TestPage {
  build() {
    Flex({ direction: FlexDirection.Column }) {
      Column() {
        Stack().height('100px').width('100%')
        Stack().height('200px').width('100%')
      }.width('100%').backgroundColor('blue')
      Stack() {
        Stack().width('100%').height('100%')
        Stack().width('100%').height('100%')
      }.flexGrow(1).width('100%').backgroundColor('#555555')
    }.width('100%').height('100%').backgroundColor('#cccccc')
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
HarmonyOS
2024-12-26 15:02:58
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
superinsect

因为Flex布局的默认行为是弹性布局,即内部元素会根据可用空间进行伸缩和压缩。具体来说,当父容器的尺寸固定时,内部元素的尺寸会根据其flex属性的设置进行调整,以尽可能填满父容器的剩余空间。

如果某个内部元素设置了flexGrow属性,表示设置组件在父容器的剩余空间所占比例;如果设置了flexShrink属性,表示设置父容器压缩尺寸分配给此属性所在组件的比例。可以给那个Column设置.flexShrink(0)。

分享
微博
QQ
微信
回复
2024-12-26 16:49:15
相关问题
HarmonyOS bindSheet高度异常
1000浏览 • 1回复 待解决
HarmonyOS元素的阴影被子元素覆盖
562浏览 • 1回复 待解决
HarmonyOS NavPathStack如何删除元素
749浏览 • 1回复 待解决
HarmonyOS 动态隐藏页面元素
864浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容的高度
1249浏览 • 1回复 待解决
HarmonyOS json解析异常
1243浏览 • 1回复 待解决
HarmonyOS 弹窗异常问题
1312浏览 • 1回复 待解决
HarmonyOS 异常堆栈获取
955浏览 • 1回复 待解决
HarmonyOS xml解析异常
782浏览 • 1回复 待解决
HarmonyOS router回退异常
550浏览 • 1回复 待解决