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

Question

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

我想添加一点空格 b/w 搜索 Textfield 和按钮。 这就是我的代码的控制部分的样子。我正在尝试设置 textFieldSearchBox 的样式，使其右侧有一点边距，我尝试增加 Edge 插图，但似乎增加了 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,

                        ],
                    ),
                ),
        );

Answer 1

如何为小部件添加边距

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

所以如果你有这样的东西

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

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

给你这样的东西

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

EdgeInsets 的含义

当您设置填充时，您不能直接使用整数或 double 。您必须使用 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
      ),
    ),
  );
}