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

Question

我试图将我的头围绕在Flutter的ui位置.所以我现在有一些看起来像这样的东西

我想添加一点空格黑白搜索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包装小部件.如果您将光标放在窗口小部件名称上并在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"),
  );
}

由于在这个例子中left和right是相同的,top并且bottom是相同的,我们可以简化EdgeInsets到

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

使用Container设置填充和边距

另一种方法是将您的小部件包装在Container中.Container小部件具有填充和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 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

为什么在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()),
    ),
  ),
);

Answer 4

由于您的小部件的布局是Row，为什么mainAxisAlignment不像这样向它添加属性：

mainAxisAlignment : MainAxisAlignment.spaceAround

或者

mainAxisAlignment : MainAxisAlignment.spaceBetween