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

所以在我的栏目中，我想在顶部和底部添加一些填充，而不必插入新的容器。这可能吗？

Answer 1

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

Flutter中的“构成优于继承”的方法是非常有意的。你可以在Flutter的Gitter channel找到最近关于利弊的讨论。

Answer 2

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

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

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

查看我的完整答案here。

Answer 3

如果您使用的是Visual Studio Code，请突出显示窗口小部件，单击灯泡，然后从菜单中选择“用填充包装”。

如您在图片中所见，它会自动将小部件包裹在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

More information - Flutter Padding

使用填充小部件。

下面的代码只需将填充添加到文本小部件中，如图所示。使用Flutter Inspector来查看填充的布局。

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

所有小部件的颤动填充？

4 个答案: