使用分隔线按百分比进行颤振行布局

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包。由于 的边距而分别减去 -4 ，card由于 VerticalDivider 的缘故，分别减去 -8 。这导致了这个视图：

但不幸的是我似乎看不到垂直分隔线（空间只是白色？）。而且如果有一种方法可以对左右容器（即绘制分隔线后剩余的空间）说“请消耗大约 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'),
        ),
      ),
   ],
);

相应地添加边距/填充。