HarmonyOS 鸿蒙Next：普通组件如何实现类似Blank效果，填充满剩余空间

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next：普通组件如何实现类似Blank效果，填充满剩余空间

普通组件如何实现类似Blank 的效果，填充满剩余空间？有示例么

Harmonyos Next教程
5 回复
Flex 布局 可以指定某个子元素占据的父元素的剩余空间

只用flex倒是可以实现效果，没找到更好的方式...

Flex() {
  Text("昵称")
    .width(50)
    .height("100%")
    .fontColor("#80ffffff")
    .fontSize(14)
  TextInput()
    .flexBasis("auto")
    .fontColor(Color.White)
  Text("确定")
    .width(100)
    .height("100%")
    .fontColor("#b3ffe95c")
    .fontSize(14)
}
.align(Alignment.Center)
.borderRadius(22)
.clip(true)
.padding({left:16,right:16})
.backgroundColor("#1AEAE6FF")
.size({ height: 44 })

用弹性布局容器Flex包裹普通组件，普通组件设置宽高100%

貌似不行，如果这个组件是在中间的话 例如:
Row() { Text(“昵称”) .fontColor("#80ffffff") .fontSize(14)

  Flex(){
    TextInput()
      .size({width:"100%"})
  }
  Text("确定")
    .fontColor("#b3ffe95c")
    .fontSize(14)
}
.borderRadius(22)
.padding({left:16,right:16})
.backgroundColor("#1AEAE6FF")
.size({ height: 44 })

在HarmonyOS鸿蒙Next中，普通组件要实现类似Blank的效果填充满剩余空间，可以使用Flex布局。具体方法是，将普通组件放置在Flex容器中，并设置该组件的flexGrow属性为1，这样它就会自动填充剩余空间。同时，确保Flex容器的主轴方向（如Row或Column）已正确设置。如果问题依旧没法解决，请加我微信，我的微信是itying888。

回到顶部