我有一个列小部件与两个TextField小部件作为孩子，我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
受https://stackoverflow.com/a/70993832/14298786的启发，在List<Widget>上使用扩展来添加sizebox:
extension on List<Widget> {
List<Widget> insertBetweenAll(Widget widget) {
var result = List<Widget>.empty(growable: true);
for (int i = 0; i < length; i++) {
result.add(this[i]);
if (i != length - 1) {
result.add(widget);
}
}
return result;
}
}
像这样使用:
Column(children: [
Widget1(),
Widget2(),
Widget3(),
].insertBetweenAll(SizedBox(height: 20)))
其他回答
我在这里没有看到这个解决方案，所以为了完整起见，我将把它贴出来。
你也可以使用map用Padding包裹子元素:
Column(
children: [Text('child 1'), Text('child 2')]
.map(
(e) => Padding(
padding: const EdgeInsets.all(8),
child: e,
),
)
.toList(),
);
您可以使用Wrap()小部件代替Column()在子小部件之间添加空格。并使用spacing属性给予子元素之间相等的间距
Wrap(
spacing: 20, // to apply margin in the main axis of the wrap
runSpacing: 20, // to apply margin in the cross axis of the wrap
children: <Widget>[
Text('child 1'),
Text('child 2')
]
)
你可以在小部件之间放置一个具有特定高度的sizebox，如下所示:
Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),
为什么宁愿这样包装小部件在填充?可读性!有更少的可视化样板，更少的缩进和代码遵循典型的阅读顺序。
最好使用Wrap小部件，而不是列或行。
包装( 间距:10, runSpacing: 10, 孩子们:[], ）
您可能必须在列的子列之间使用sizebox()小部件。 希望这对你们有用
