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')
  }
}
HarmonyOS
16h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

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

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

分享
微博
QQ
微信
回复
14h前
相关问题
HarmonyOS bindSheet高度异常
404浏览 • 1回复 待解决
HarmonyOS 动态隐藏页面元素
35浏览 • 1回复 待解决
HarmonyOS NavPathStack如何删除元素
39浏览 • 1回复 待解决
HarmonyOS 弹窗显示异常
277浏览 • 1回复 待解决
HarmonyOS router回退异常
27浏览 • 1回复 待解决
HarmonyOS 上传图片异常
173浏览 • 1回复 待解决
HarmonyOS xml解析异常
28浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容的高度
97浏览 • 1回复 待解决
HarmonyOS 保存图片文件异常
354浏览 • 1回复 待解决
HarmonyOS Grid组件拖动异常
361浏览 • 1回复 待解决
HarmonyOS 组件尺寸显示异常
84浏览 • 1回复 待解决
HarmonyOS web页面显示异常
35浏览 • 1回复 待解决