我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
Column(children: <Widget>[
Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);
其他回答
只需要像这样用填充物把它包起来:
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。
这是另一个涉及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.
])
],
),
我也希望在Flutter中有一些内置的方法来做到这一点。就像一个参数,你可以传递给列或行。有时你不希望每个元素都有填充,但希望元素之间有空格。特别是如果你有两个以上的孩子,写这样的东西有点乏味
const double gap = 10;
return Column(
children: [
Text('Child 1'),
SizedBox(height: gap),
Text('Child 2'),
SizedBox(height: gap),
Text('Child 3'),
SizedBox(height: gap),
Text('Child 4'),
],
);
然而,我想出了一个快速(不完美)的解决方案:
在你的项目中添加这个(只有一次):
extension ListSpaceBetweenExtension on List<Widget> {
List<Widget> withSpaceBetween({double? width, double? height}) => [
for (int i = 0; i < this.length; i++)
...[
if (i > 0)
SizedBox(width: width, height: height),
this[i],
],
];
}
从现在开始,只要你有行或列,你就可以写
Column(
children: [
Text('Child 1'),
Text('Child 2'),
Text('Child 3'),
Text('Child 4'),
].withSpaceBetween(height: 10),
),
当使用Row时,你必须用width替换height。
您可能必须在列的子列之间使用sizebox()小部件。 希望这对你们有用
默认情况下没有高度, 您可以将列包装到容器中,并将特定高度添加到容器中。 然后你可以像下面这样使用:
Container(
width: double.infinity,//Your desire Width
height: height,//Your desire Height
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('One'),
Text('Two')
],
),
),