我有一个列小部件与两个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(),
])),
]));
其他回答
Column(
children: <Widget>[
FirstWidget(),
Spacer(),
SecondWidget(),
]
)
Spacer创建一个可插入到[flexible]小部件的灵活空间。(像一列)
将输入字段小部件提取到一个自定义小部件中,该小部件包装在填充或带有填充的容器中(假设间隔对称)。
在每个子列之间设置大小不同的盒子(如其他回答中建议的那样)是不实际或不可维护的。如果你想改变间距,你必须改变每个大小的盒子小部件。
// An input field widget as an example column child
class MyCustomInputWidget extends StatelessWidget {
const MyCustomInputWidget({Key? key})
: super(key: key);
@override
Widget build(BuildContext context) {
// wrapping text field in container
return Container(
// here is the padding :)
padding: EdgeInsets.symmetric(vertical: 10),
child: TextField(...)
);
}
}
...然后父类中的列
column(
children: <Widget>[
MyCustomInputWidget(),
SizedBox(height: 10),
MyCustomInputWidget(),
],
),
显然,您希望自定义小部件具有某种构造函数来处理不同的字段参数。
你可以用不同的方法来解决这个问题。
如果使用行/列,则必须使用mainAxisAlignment: MainAxisAlignment.spaceEvenly 如果你使用Wrap Widget,你必须使用runSpacing: 5, spacing: 10日, 在任何地方都可以使用SizeBox()
你可以在这两个小部件之间使用Padding小部件,或者用Padding小部件包装这些小部件。
更新
SizedBox小部件可以在两个小部件之间使用,以增加两个小部件之间的空间,它使代码比填充小部件更具可读性。
Ex:
Column(
children: <Widget>[
Widget1(),
SizedBox(height: 10),
Widget2(),
],
),
只需要像这样用填充物把它包起来:
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Hello World!'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text('Hello World2!'),
)
]);
你也可以使用Container(padding…)或SizeBox(height: x.x)。最后一种是最常见的,但这取决于你想如何管理小部件的空间,如果空间确实是小部件的一部分,我喜欢使用填充,例如列表使用sizebox。