使用分隔符按百分比进行 flutter 行布局

Question

我想把我的盒子分成两部分，用分隔线隔开我试过这样的事情:

Card(
    child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
            Container(
                color: Colors.green,
                width: 25.w-8-4,
                child: const Text("box1")),
            const VerticalDivider(
                color: Colors.red,
                width: 16,
                thickness: 2,
            ),
            Container(
                color: Colors.indigo,
                width: 75.w-8-4,
                child: const Text("box2"),
            )
        ],
    )
)

使用 sizer包裹。由于 card 的边距而减去 -4，由于 verticalDivider 而减去 -8。这会导致此 View :

但不幸的是，我似乎看不到垂直分隔线(空格只是白色的？)。如果有一种方法可以对左右容器说“请消耗大约 25% 和 75% 的空间”，在绘制分隔线后剩下的内容，那将是很棒的。有没有办法这样说？这也使得在容器中使用填充/边距变得更容易。无需分别从容器的宽度中减去内容。

非常感谢

Answer 1

您是否考虑过使用 Expanded ？

return Row(
 children:[
  Expanded(
    flex:25,
    child: Container(
       color: Colors.green,
       child: Text('box1'),
        ),
      ),
  Expanded(
    flex:75,
    child: Container(
       color: Colors.blue,
       child: Text('box2'),
        ),
      ),
   ],
);

相应地添加边距/填充。