所有小部件的颤振填充？

Posted 2023-02-23

【中文标题】所有小部件的颤振填充？

【英文标题】：Flutter padding for all widgets?

【发布时间】：2017-10-18 14:22:39

【问题描述】：

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

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

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

【问题讨论】：

Flutter Padding: Ultimate Guilde

【参考方案1】：

More information - Flutter Padding

使用填充小部件。

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

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

【参考方案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'),
      ),
    ));
  

【参考方案3】：

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

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

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

查看我的完整答案here。

【讨论】：

这会将填充应用于每个子项还是一起？

@jonney，Padding 只需要一个孩子。但是，如果孩子有孩子，则只会在 Padding 小部件的直接孩子周围添加填充。

将Padding 对象放入children: <Widget>[ 数组使其工作。

【参考方案4】：

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

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

【讨论】：

这非常有效。我只是偶然发现了这个文档，它说使用 Container 或 Padding 并没有真正的区别。对我来说，对没有像 Text 或 Icon 这样的子类的小部件使用填充似乎更具可读性！谢谢:)

在那种情况下，为什么容器小部件有填充:)？