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

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。这导致此视图：

但不幸的是我似乎看不到垂直分隔线（space 只是白色的？）。如果有一种方法可以说，“请消耗大约 25% 和 75% 的 space”到左右容器，绘制分隔线后剩下的东西。有没有办法这样说？这也使得在容器中使用 padding/margin 变得更容易。无需分别从容器的宽度中减去内容。

非常感谢

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'),
        ),
      ),
   ],
);

相应地添加 margin/padding。

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

Flutter row layouting by percentage with divider

flutter

dart

flutter-layout