我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
我有一个列小部件与两个TextField小部件作为孩子,我想在他们之间有一些空间。
我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。
当前回答
我在这里没有看到这个解决方案,所以为了完整起见,我将把它贴出来。
你也可以使用map用Padding包裹子元素:
Column(
children: [Text('child 1'), Text('child 2')]
.map(
(e) => Padding(
padding: const EdgeInsets.all(8),
child: e,
),
)
.toList(),
);
其他回答
这是另一个涉及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.
])
],
),
你可以在小部件之间放置一个具有特定高度的sizebox,如下所示:
Column(
children: <Widget>[
FirstWidget(),
SizedBox(height: 100),
SecondWidget(),
],
),
为什么宁愿这样包装小部件在填充?可读性!有更少的可视化样板,更少的缩进和代码遵循典型的阅读顺序。
默认情况下没有高度, 您可以将列包装到容器中,并将特定高度添加到容器中。 然后你可以像下面这样使用:
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(),
Widget(),
Widget(),
Widget(),
]
.map((e) => Padding(
child: e,
padding: const EdgeInsets.symmetric(vertical: 10),
))
.toList(),
),
这将扭曲所有的小部件与填充没有重复。
您可以使用Padding来包装每个子部件,然后设置Padding的顶部或底部。
如果你不想写很多相同的数字,你可以这样写:
Column(
children: [
child1,
child2,
...,
childN
].map((e) => Padding(padding: EdgeInsets.only(top: 10), child: e)).toList()
);