我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
还可以使用辅助函数在每个子元素之后添加空格。
List<Widget> childrenWithSpacing({
@required List<Widget> children,
double spacing = 8,
}) {
final space = Container(width: spacing, height: spacing);
return children.expand((widget) => [widget, space]).toList();
}
因此,返回的列表可以用作列的子元素
Column(
children: childrenWithSpacing(
spacing: 14,
children: [
Text('This becomes a text with an adjacent spacing'),
if (true == true) Text('Also, makes it easy to add conditional widgets'),
],
),
);
我不确定,如果它是错误的或有一个性能惩罚运行的孩子通过一个帮助函数为相同的目标?
其他回答
只需要像这样用填充物把它包起来:
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。
Column(
children: <Widget>[
FirstWidget(),
Spacer(),
SecondWidget(),
]
)
Spacer创建一个可插入到[flexible]小部件的灵活空间。(像一列)
受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)))
您可以使用Padding来包装每个子部件,然后设置Padding的顶部或底部。
如果你不想写很多相同的数字,你可以这样写:
Column(
children: [
child1,
child2,
...,
childN
].map((e) => Padding(padding: EdgeInsets.only(top: 10), child: e)).toList()
);
我也希望在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。