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

Question

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

我想添加一点空间黑白搜索文本字段和按钮。这就是我的代码的控制部分的样子。我正在尝试设置我的样式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,

                        ],
                    ),
                ),
        );

score 137 · Accepted Answer

如何为小部件添加边距

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

所以如果你有这样的东西

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

然后你只需用 Padding 包装小部件。如果您将光标放在小部件名称上并在 Android Studio 中按Alt+ Enter（或Mac 上的Option+ ），这很容易做到。Return然后从菜单中选择添加填充。

这给了你这样的东西

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

由于在这个例子中leftandright是相同的并且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
      ),
    ),
  );
}

score 7 · Accepted Answer

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

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

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

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

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

score 6 · Accepted Answer

您可以将组件放在填充内，如下所示

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

score 5 · Accepted Answer

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

mainAxisAlignment : MainAxisAlignment.spaceAround

或者

mainAxisAlignment : MainAxisAlignment.spaceBetween

score 0 · Accepted Answer

只需使用

EdgeInsets.fromLTRB

例如：

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

score 0 · Accepted Answer

0

如果您想避免使用 Container，也可以使用SizedBox

于 2020-05-23T11:29:33.943 回答

score 0 · Accepted Answer

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

由此

YourWidget(
    ....
)

至此

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

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

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

7 回答 7

如何为小部件添加边距

EdgeInsets 的含义

使用容器设置填充和边距

Related

Reference