如何为我的小部件添加边距？了解 EdgeInsets 的效果

Posted 2023-02-23

【中文标题】如何为我的小部件添加边距？了解 EdgeInsets 的效果

【英文标题】：How do I add margins to my widget ? Understanding the effect of EdgeInsets

【发布时间】：2018-10-14 04:41:47

【问题描述】：

我正在尝试围绕 Flutter 中的 ui 放置。所以我目前有一些看起来像这样的东西

我想添加一点空格 b/w 搜索 Textfield 和按钮。 这就是我的代码的控制部分的样子。我正在尝试设置我的textFieldSearchBox 的样式，所以它在右侧有一点边距，我尝试增加边缘插图，但它似乎增加了 TextField 的大小，我不知道为什么？我知道我可以在 TextField 之后添加一个填充元素，但我想知道我的其他选项是什么。为什么在 textFieldSearchBox 的装饰中增加 EdgeInsets 会增加文本框的大小？我的理想情况是在此文本框（LTRB）的所有边框周围添加边距。 有什么建议吗？

TextField textFieldSearchBox = new TextField(
            keyboardType: TextInputType.text,
            controller: filterController,
            autofocus: false,
            decoration: new InputDecoration(
                contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
                border:
                new OutlineInputBorder(borderRadius: BorderRadius.only()),
            ),
        );

    var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                searchButton,
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: ()print("Called....");,
                ),
            ],
        );

    return new Scaffold(
                appBar: new AppBar(
                    title: new Text("Title goes here.."),
                    backgroundColor: Colors.lightBlueAccent,
                ),
                body: new Container(
                    child:new Column(
                        children: <Widget>[
                            optionRow,

                        ],
                    ),
                ),
        );

【参考方案1】：

如何为小部件添加边距

在 Flutter 中，我们通常谈论在小部件周围添加 Padding 而不是边距。 Container 小部件确实有一个 margin 参数，但即使这样也只是在内部用一个 Padding 小部件将它的子组件（以及子组件拥有的任何装饰）包装起来。

所以如果你有这样的东西

并且您想像这样在小部件周围添加一些空间

然后您只需使用 Padding 包装小部件。如果您将光标放在小部件名称上并按 Alt+Enter（或 Option+Return kbd> 在 Mac 上）在 android Studio 中。然后从菜单中选择添加填充。

给你这样的东西

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

EdgeInsets 的含义

当您设置填充时，您不能直接使用整数或双精度数。您必须使用 EdgeInsets 指定空间（逻辑像素数）。您可以一次设置所有边（正如我们在上面的示例中看到的），或者您可以像这样单独设置它们：

Widget myWidget() 
  return  Padding(
    padding: const EdgeInsets.only(
      left: 40,
      top: 20,
      right: 40,
      bottom: 20,
    ),
    child: Text("text"),
  );

由于在本例中left 和right 相同，top 和bottom 相同，我们可以将 EdgeInsets 简化为

padding: const EdgeInsets.symmetric(
  horizontal: 40,
  vertical: 20,
),

使用容器设置内边距和边距

另一种方法是将您的小部件包装在一个容器中。 Container 小部件同时具有 padding 和 margin 属性。 （不过，如果您还添加了诸如背景颜色或边框之类的装饰，这才是必要的。）

Widget myWidget() 
  return Container(
    margin: EdgeInsets.all(30),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black),
    ),
    child: Text(
      "Flutter",
      style: TextStyle(
          fontSize: 50.0
      ),
    ),
  );

【参考方案2】：

为什么在textFieldSearchBox的装饰中增加EdgeInsets会增加文本框的大小？

因为 internal 内边距使用了内边距。您在边框和实际文本之间看到的那个。

我的理想情况是在此文本框 (LTRB) 的所有边框周围添加边距。有什么建议吗？

将您的 TextField 包装成 Padding。这是在 Flutter 中实现所需布局的理想方式。

final textFieldSearchBox = new Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: new TextField(
    keyboardType: TextInputType.text,
    controller: filterController,
    autofocus: false,
    decoration: new InputDecoration(
      contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
      border: new OutlineInputBorder(borderRadius: BorderRadius.only()),
    ),
  ),
);

【讨论】：

这会是孩子和实际容器之间的填充吗？ edgeinset 是否意味着填充孩子和父母？

EdgeInset 实际上没有任何意义。它只是一个保存值的类。有趣的是Padding 小部件。这增加了父母和孩子之间的空间

感谢您提供的有意义的提示我只是好奇在我的示例中边缘插图用于边框和文本之间的间距？如果我不使用填充小部件，我想知道 wpuld 如何应用于其他小部件。我仍然有点不清楚边缘插入的含义以及它控制的填充

【参考方案3】：

你可以把组件放在一个 padding 里面，像这样

var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                new Padding(padding: new EdgeInsets.all(20.0),child:button,),
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: ()print("Called....");,
                ),
            ],
        );

【参考方案4】：

既然你的小部件的布局是Row，你为什么不给它添加mainAxisAlignment属性呢：

mainAxisAlignment : MainAxisAlignment.spaceAround

或者

mainAxisAlignment : MainAxisAlignment.spaceBetween

【讨论】：

因为行中没有剩余空间可以分配。 mainAxisAlignment 仅在剩余空间未用完时才重新分配剩余空间。

【参考方案5】：

简单地使用

EdgeInsets.fromLTRB

例如：

padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),

【讨论】：

试着向 OP 解释你在做什么，让其他人更了解

【参考方案6】：

如果你想避免使用容器，你也可以使用 SizedBox

【参考方案7】：

有些小部件允许使用参数，但在大多数情况下，您可以像这样将小部件包装在 Padding 小部件中。

从此

YourWidget(
    ....
)

至此

Padding(
    padding: EdgeInsets.all(value),
    YourWidget(
        ....
    )
)

其中 "all" 可以替换为您选择的变体