我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
如果在列、行、listView等中有太多的子元素,并且必须在应用程序的许多地方执行相同的操作,那么添加多个大小的框将变得乏味。
你可以使用下面的utils来封装添加这些大小的盒子的逻辑:
List<Widget> addHorizontalSpaceBetweenElements(double space, List<Widget> widgets) {
return _addSpaceBetweenElements(widgets, () => SizedBox(width: space));
}
List<Widget> addVerticalSpaceBetweenElements(double space, List<Widget> widgets) {
return _addSpaceBetweenElements(widgets, () => SizedBox(height: space));
}
List<Widget> _addSpaceBetweenElements(List<Widget> widgets, ValueGetter<SizedBox> sizedBoxGetter) {
if (widgets.isEmpty || widgets.length == 1) {
return widgets;
}
List<Widget> spacedWidgets = [widgets.first];
for (var i = 1; i < widgets.length - 1; i++) {
spacedWidgets.add(sizedBoxGetter());
spacedWidgets.add(widgets[i]);
}
spacedWidgets.add(sizedBoxGetter());
spacedWidgets.add(widgets.last);
return spacedWidgets;
}
你可以这样使用它们:
Column(
children: addVerticalSpaceBetweenElements(5, [
Text(),
Text(),
Row(children: addHorizontalSpaceBetweenElements(5, [
Text(),
Text(),
])),
]));
其他回答
你可以在小部件之间放置一个具有特定高度的sizebox,如下所示:
Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),
为什么宁愿这样包装小部件在填充?可读性!有更少的可视化样板,更少的缩进和代码遵循典型的阅读顺序。
与上面为了代码可读性而使用sizebox的方式相同,您可以以相同的方式使用Padding小部件,而不必使其成为Column的任何子部件的父小部件
Column(
children: <Widget>[
FirstWidget(),
Padding(padding: EdgeInsets.only(top: 40.0)),
SecondWidget(),
]
)
如果你不想包装填充与每个小部件或重复大小框。
试试这个:
Column(
children: [
Widget(),
Widget(),
Widget(),
Widget(),
]
.map((e) => Padding(
child: e,
padding: const EdgeInsets.symmetric(vertical: 10),
))
.toList(),
),
这将扭曲所有的小部件与填充没有重复。
Column(children: <Widget>[
Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);
最好使用Wrap小部件,而不是列或行。
包装( 间距:10, runSpacing: 10, 孩子们:[], )