我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
你可以在这两个小部件之间使用Padding小部件,或者用Padding小部件包装这些小部件。
更新
SizedBox小部件可以在两个小部件之间使用,以增加两个小部件之间的空间,它使代码比填充小部件更具可读性。
Ex:
Column(
children: <Widget>[
Widget1(),
SizedBox(height: 10),
Widget2(),
],
),
其他回答
默认情况下没有高度, 您可以将列包装到容器中,并将特定高度添加到容器中。 然后你可以像下面这样使用:
Container(
width: double.infinity,//Your desire Width
height: height,//Your desire Height
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('One'),
Text('Two')
],
),
),
只需要像这样用填充物把它包起来:
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。
受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)))
这是另一个涉及for循环的选项。
Column(
children: <Widget>[
for (var i = 0; i < widgets.length; i++)
Column(
children: [
widgets[i], // The widget you want to create or place goes here.
SizedBox(height: 10) // Any kind of padding or other widgets you want to put.
])
],
),
将输入字段小部件提取到一个自定义小部件中,该小部件包装在填充或带有填充的容器中(假设间隔对称)。
在每个子列之间设置大小不同的盒子(如其他回答中建议的那样)是不实际或不可维护的。如果你想改变间距,你必须改变每个大小的盒子小部件。
// 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(),
],
),
显然,您希望自定义小部件具有某种构造函数来处理不同的字段参数。