HarmonyOS 鸿蒙Next中OpenHarmony用了position后，高度不正确

HarmonyOS 鸿蒙Next中OpenHarmony用了position后，高度不正确

源码：

hljs @Entry @Component struct LoginPage { build(){ Flex({ direction: FlexDirection.Column }) { Row() { Text(“A”) .fontSize(22) Text() .backgroundColor(’#f00’) .width(200) .height(200) .position({ x:0, y:100 }) } .width(‘100%’) Text(“B”) .fontSize(22) } }


更多关于HarmonyOS 鸿蒙Next中OpenHarmony用了position后，高度不正确的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

楼主您好，以反馈给开发人员，请耐心等待，感谢您的支持

更多关于HarmonyOS 鸿蒙Next中OpenHarmony用了position后，高度不正确的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用position之后height不生效

适用于 HarmonyOS 3.1 beta API 9

问题现象

ArkTS使用position之后height不生效

解决措施

容器组件在使用position之后会脱离文本流，导致容器脱离外层容器束缚，导致height不生效，可以将外层容器换成Stack可以解决这个问题。

Flex 容器属性概览

flex-direction

  • row（默认）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

  • nowrap（默认）：项目放在同一行，可能出现溢出。
  • wrap：如果一行放不下，则换行。
  • wrap-reverse：如果一行放不下，则反向换行。

flex-flow

  • 综合上述两个属性，初始值为 row nowrap。

justify-content

  • flex-start（默认）：项目位于当前行的起点。
  • flex-end：项目位于当前行的终点。
  • center：项目居中。
  • space-between：项目分布在行里，两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。

align-items

  • flex-start：项目位于交叉轴的起点。
  • flex-end：项目位于交叉轴的终点。
  • center：项目位于交叉轴的中点。
  • baseline：项目位于基线对齐。
  • stretch（默认）：项目被拉伸以适应整个交叉轴。

align-content

  • flex-start：行位于交叉轴的起点。
  • flex-end：行位于交叉轴的终点。
  • center：行位于交叉轴的中点。
  • space-between：行分布在交叉轴，两端对齐，行之间的间隔相等。
  • space-around：每行两侧的间隔相等。
  • stretch（默认）：如果未定义高度或定义为auto，空间会被拉伸以适应整个交叉轴。

我今天也碰到了，把flex括号里面的参数删了试下~

删了就是Row模式了吧，

在HarmonyOS鸿蒙Next中使用OpenHarmony时，如果position属性导致高度不正确，可能是由于以下原因：

  1. 绝对定位：使用position: absolute时，元素脱离文档流，父容器无法计算其高度，导致高度塌陷。解决方案是为父容器设置position: relative，或手动调整父容器高度。

  2. 固定定位：position: fixed也会脱离文档流，通常用于视口定位，不影响父容器高度。

  3. 浮动元素：浮动元素也会导致父容器高度塌陷，可以通过清除浮动（如使用clearfix）来解决。

建议检查布局结构，确保定位方式符合预期，必要时使用height或min-height明确设置高度。

回到顶部