我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
与上面为了代码可读性而使用sizebox的方式相同,您可以以相同的方式使用Padding小部件,而不必使其成为Column的任何子部件的父小部件
Column(
children: <Widget>[
FirstWidget(),
Padding(padding: EdgeInsets.only(top: 40.0)),
SecondWidget(),
]
)
其他回答
受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)))
有很多方法可以做到这一点,我在这里列出了一些。
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的方式相同,您可以以相同的方式使用Padding小部件,而不必使其成为Column的任何子部件的父小部件
Column(
children: <Widget>[
FirstWidget(),
Padding(padding: EdgeInsets.only(top: 40.0)),
SecondWidget(),
]
)
还可以使用辅助函数在每个子元素之后添加空格。
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'),
],
),
);
我不确定,如果它是错误的或有一个性能惩罚运行的孩子通过一个帮助函数为相同的目标?
这是另一个涉及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.
])
],
),