所有小部件的颤动填充？

Question

我正在尝试在Card小部件中的一些文本和图标的顶部和底部添加一些填充.我发现flutter有一个简单的方法来为容器做这个,但似乎无法找到一种方法来与其他小部件(除了将它们包装在容器中).这是我到目前为止的代码:

  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)
              ]
            )
          )
        )
      ]
    )
  )

所以在我的列子中,我想在顶部和底部添加一些填充,而不必插入新的Container.这可能吗？

Answer 1

您可以使用Padding,这是一个非常简单的Widget,只是需要另外Widget一个child和EdgeInsets你一样已经在使用作为一个对象padding.

Flutter中的"构图优于继承"的方法是非常有意的.您可以在Flutter的Gitter频道上找到有关优缺点的最新讨论.

Answer 2

这是提供一些代码的补充答案。作为接受的答案状态，您可以使用“填充”小部件。Flutter与Android或iOS不同，因为填充是窗口小部件而不是属性。（它是Container的属性，但在内部仍是一个小部件。）

这是一个包裹有Padding小部件的Text小部件。

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text("text"),
);

在这里查看我的完整答案。

Answer 3

如果您使用的是 Visual Studio Code，请突出显示您的小部件，单击灯泡，然后从菜单中选择 Wrap with Padding。

正如您在图片中看到的，它自动将小部件包裹在 Padding 小部件周围。

@override
  Widget build(BuildContext context) {

    return Container(child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        decoration: InputDecoration(border: InputBorder.none, hintText: 'Enter a text'),
      ),
    ));
  }

Answer 4

更多信息 - Flutter 填充

使用填充小部件。

下面的代码只是向文本小部件添加填充，如图所示。使用 Flutter Inspector 查看填充的布局方式。

Padding(
          padding: const EdgeInsets.all(50.0),
          child: Text('Text Widget'),
        ),