我想把我的盒子分成两部分,用分隔线隔开我试过这样的事情:
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% 的空间”,在绘制分隔线后剩下的内容,那将是很棒的。有没有办法这样说?这也使得在容器中使用填充/边距变得更容易。无需分别从容器的宽度中减去内容。
非常感谢
最佳答案
您是否考虑过使用 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'),
),
),
],
);
相应地添加边距/填充。
关于使用分隔符按百分比进行 flutter 行布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71939133/