我尝试在卡片小部件中的一些文本和图标的顶部和底部添加一些填充。我发现flutter有一个简单的方法来为容器做这件事,但是似乎找不到一个方法来为其他小部件做这件事(除了将它们 Package 在容器中)。这是我到目前为止得到的代码:
body: new Container(
padding: new EdgeInsets.all(10.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget> [
new Card(
color: Colors.white70,
child: new Container(
padding: new EdgeInsets.all(10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget> [ //Padding between these please
new Text("I love Flutter", style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold)),
new Icon(Icons.favorite, color: Colors.redAccent, size: 50.0)
]
)
)
)
]
)
)
因此,在我的children of column中,我想在顶部和底部添加一些填充,而不必插入新的Container。这可能吗?
4条答案
按热度按时间smdncfj31#
您可以使用
Padding
,这是一个非常简单的Widget
,它只需要将另一个Widget
作为child
和一个EdgeInsets
对象,就像您已经使用的padding
一样。Flutter中的这种“组合优于继承”的方法是非常有目的的。你可以找到最近关于Flutter的Gitter channel的优缺点的讨论。
toe950272#
下面是一个补充答案,它提供了一些代码。正如接受的答案所述,您可以使用Padding小部件。Flutter与Android或iOS不同,因为Padding是一个小部件而不是属性。(它是Container的属性,但在内部它仍然是一个小部件。
这是一个用填充小部件 Package 的文本小部件。
请看我的完整答案here。
zour9fqk3#
如果您使用的是Visual Studio Code,请突出显示您的小部件,单击灯泡,然后从菜单中选择Wrap with Padding。
如图所示,它自动将小部件包裹在Padding小部件周围。
smdncfj34#
More information - Flutter Padding
使用填充小部件。
下面的代码只是添加填充到文本小部件一样,如图所示。使用Flutter Inspector查看填充的布局。