我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
Column(
children: <Widget>[
FirstWidget(),
Spacer(),
SecondWidget(),
]
)
Spacer创建一个可插入到[flexible]小部件的灵活空间。(像一列)
其他回答
你可以在这两个小部件之间使用Padding小部件,或者用Padding小部件包装这些小部件。
更新
SizedBox小部件可以在两个小部件之间使用,以增加两个小部件之间的空间,它使代码比填充小部件更具可读性。
Ex:
Column(
children: <Widget>[
Widget1(),
SizedBox(height: 10),
Widget2(),
],
),
将输入字段小部件提取到一个自定义小部件中,该小部件包装在填充或带有填充的容器中(假设间隔对称)。
在每个子列之间设置大小不同的盒子(如其他回答中建议的那样)是不实际或不可维护的。如果你想改变间距,你必须改变每个大小的盒子小部件。
// 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(),
],
),
显然,您希望自定义小部件具有某种构造函数来处理不同的字段参数。
这是另一个涉及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.
])
],
),
有很多方法可以做到这一点,我在这里列出了一些。
Use SizedBox and provide some height: Column( children: <Widget>[ Widget1(), SizedBox(height: 10), // <-- Set height Widget2(), ], ) Use Spacer Column( children: <Widget>[ Widget1(), Spacer(), // <-- Spacer Widget2(), ], ) Use Expanded Column( children: <Widget>[ Widget1(), Expanded(child: SizedBox.shrink()), // <-- Expanded Widget2(), ], ) Set mainAxisAlignment Column( mainAxisAlignment: MainAxisAlignment.spaceAround, // <-- alignments children: <Widget>[ Widget1(), Widget2(), ], ) Use Wrap Wrap( direction: Axis.vertical, spacing: 20, // <-- Spacing between children children: <Widget>[ Widget1(), Widget2(), ], )
您可能必须在列的子列之间使用sizebox()小部件。 希望这对你们有用