HarmonyOS鸿蒙Next中OpenHarmony布局bug, position、zIndex

HarmonyOS鸿蒙Next中OpenHarmony布局bug, position、zIndex

cke_165.png

@Entry @Component struct LoginPage { build(){ Flex({ direction: FlexDirection.Column }) { Row() { Text(“A”) .fontSize(22) Column() { Text(“C”) .width(400) .height(400) .position({ x:0, y:22 }) .backgroundColor(Color.Blue) } } .width(‘100%’) .zIndex(2) Text(“B”) .height(200) .fontSize(22) .backgroundColor(Color.Red) .zIndex(1) } } }


BUG1: 如果删除A块，则C块没有显示出来

BUG2: 蓝色块应该在红色块上层

更多关于HarmonyOS鸿蒙Next中OpenHarmony布局bug, position、zIndex的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

Stack容器组件和zIndex属性更配哦

你把外层Flex改为Stack 试试，

更多关于HarmonyOS鸿蒙Next中OpenHarmony布局bug, position、zIndex的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


Stack显示层次正常，但是布局不合适，

标题

这是段落1。

这是段落2。

  • 列表项1
  • 列表项2
  • 列表项3

在HarmonyOS鸿蒙Next中，OpenHarmony布局的position和zIndex属性可能引发一些布局问题。position用于控制元素的定位方式（如absolute、relative等），而zIndex用于控制元素的堆叠顺序。常见问题包括：

  1. position设置不当：使用absolute定位时，元素可能脱离文档流，导致布局错乱。建议检查父元素的position属性，确保其设置为relative或absolute。

  2. zIndex冲突：多个元素设置zIndex时，可能出现堆叠顺序不符合预期的情况。确保zIndex值合理分配，避免冲突。

  3. 性能问题：过度使用zIndex可能导致渲染性能下降，建议仅在必要时使用。

调试时，可以使用开发者工具检查元素的布局属性，确保其符合预期。

回到顶部