android 所有小部件的抖动填充?

llycmphe  于 2023-06-20  发布在  Android
关注(0)|答案(4)|浏览(101)

我尝试在卡片小部件中的一些文本和图标的顶部和底部添加一些填充。我发现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。这可能吗?

smdncfj3

smdncfj31#

您可以使用Padding,这是一个非常简单的Widget,它只需要将另一个Widget作为child和一个EdgeInsets对象,就像您已经使用的padding一样。
Flutter中的这种“组合优于继承”的方法是非常有目的的。你可以找到最近关于Flutter的Gitter channel的优缺点的讨论。

toe95027

toe950272#

下面是一个补充答案,它提供了一些代码。正如接受的答案所述,您可以使用Padding小部件。Flutter与Android或iOS不同,因为Padding是一个小部件而不是属性。(它是Container的属性,但在内部它仍然是一个小部件。
这是一个用填充小部件 Package 的文本小部件。

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

请看我的完整答案here

zour9fqk

zour9fqk3#

如果您使用的是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'),
      ),
    ));
  }
smdncfj3

smdncfj34#

More information - Flutter Padding
使用填充小部件。
下面的代码只是添加填充到文本小部件一样,如图所示。使用Flutter Inspector查看填充的布局。

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

相关问题