所有小部件的颤振填充？

Question

我正在尝试在卡片小部件中的某些文本和图标的顶部和底部添加一些填充。我发现颤振有一种简单的方法可以为容器执行此操作，但似乎无法找到使用其他小部件执行此操作的方法（除了将它们包装在容器中）。这是我目前得到的代码：

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

因此，在我的子列中，我想在顶部和底部添加一些填充，而不必插入新的容器。这可能吗？

Answer 1

More information - Flutter Padding

使用填充小部件。

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

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

Answer 2

如果您使用的是 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 3

这是提供一些代码的补充答案。正如接受的答案所述，您可以使用 Padding 小部件。 Flutter 与 Android 或 iOS 不同，因为 Padding 是一个小部件而不是一个属性。 （它是Container的一个属性，但在内部它仍然是一个widget。）

这是一个用 Padding 小部件包装的 Text 小部件。

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

查看我的完整答案here。

Answer 4

您可以使用Padding，这是一个非常简单的Widget，只需将另一个Widget 作为child 和一个EdgeInsets 对象，就像您已经使用的padding 一样。

Flutter 中这种“组合优于继承”的做法是非常有意的。你可以在 Flutter 的 Gitter channel 上找到最近关于利弊的讨论。