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

Question

我正在努力思考 ui 在 Flutter 中的位置。所以我现在有一些看起来像这样的东西

我想添加一点 space b/w 搜索文本字段和按钮。这就是我代码的控制部分的样子。我正在尝试设置 textFieldSearchBox 的样式，使其右侧有一点边距，我尝试增加边缘插入，但它似乎增加了 TextField 的大小，我不知道为什么？我知道我可以在 TextField 之后添加一个填充元素，但我想知道我的其他选项 are.Why 增加 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

Why does increasing the EdgeInsets in the decoration of textFieldSearchBox increase the size of the textbox ?

因为填充用于内部填充。您在边框和实际文本之间看到的那个。

My ideal situation would be to add margin around all the borders of this textbox (LTRB). Any suggestions ?

将您的 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()),
    ),
  ),
);

Answer 2

您可以将组件放在填充内，像这样

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....");},
                ),
            ],
        );

Answer 3

既然你的小部件的布局是 Row，你为什么不像这样添加 mainAxisAlignment 属性：

mainAxisAlignment : MainAxisAlignment.spaceAround

或者

mainAxisAlignment : MainAxisAlignment.spaceBetween

Answer 4

如何为小部件添加边距

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

所以如果你有这样的东西

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

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

它给你这样的东西

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

EdgeInsets 的含义

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

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 widget 有 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
      ),
    ),
  );
}

Answer 5

只需使用

EdgeInsets.fromLTRB

例如：

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

Answer 6

如果你想避免使用 Container

，你也可以使用 SizedBox

Answer 7

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

由此

YourWidget(
    ....
)

致此

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

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

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

How do I add margins to my widget ? Understanding the effect of EdgeInsets

flutter

flutter-layout

如何为小部件添加边距

EdgeInsets 的含义

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