我用了 flexGrow(2)，但两个组件宽度看起来差不多，这是咋回事？

Question

我有一个 Flex 容器，里面两个 Text，一个我设置了 .flexGrow(2)，另一个是 .flexGrow(1)，按理说第一个应该占两倍空间，但看起来两者几乎一样宽，不知道是不是哪里没设置对：

Flex() {
  Text('flexGrow 2')
    .flexGrow(2)
    .height(100)
  Text('flexGrow 1')
    .flexGrow(1)
    .height(100)
}

还需要配合 width 吗？想请大家帮我看下。

Answer 1

你遇到的问题多半是 Flex 容器没有多余的剩余空间，flexGrow 是分配“剩余”空间的，不是直接设置宽度。

建议确保 Flex 容器先设置一个固定宽度，例如：

Flex() {
  Text('flexGrow 2').flexGrow(2).height(100)
  Text('flexGrow 1').flexGrow(1).height(100)
}
.width('90%').height(120)

若你不给父容器设定宽度，可能没有剩余空间可分，导致 Grow 不起作用。
多配合 padding() 和 margin() 控制空间分布会更直观。