如何为小部件添加边距?了解EdgeInsets的效果 [英] How do I add margins to my widget ? Understanding the effect of EdgeInsets

问题描述

我正在尝试将自己的头放在Flutter中的ui位置上.所以我目前有这样的东西

I am trying to wrap my head around ui placement in Flutter. So I currently have something that looks like this

我想添加一点空格，黑白搜索文本字段和按钮. 这就是我代码的控制部分.我正在尝试设置textFieldSearchBox的样式，以便在右侧留一点空白，我尝试尝试增加Edge的插入量，但是似乎增加了TextField的大小，我不知道为什么?我知道可以在TextField之后添加padding元素，但我想知道其他选项是什么.为什么增加TextFieldSearchBox装饰中的EdgeInsets会增加文本框的大小?我的理想情况是在此文本框(LTRB)的所有边框周围添加边距. 有什么建议吗?

I would like to add a little space b/w search Textfield and the button. This is what the controlling part of my code looks like. I am trying to style my textFieldSearchBox so it has a little margin on the right, I tried trying to increase the Edge insets but it seems to increase the size of the TextField I don't know why? I know I could adding a padding element after TextField but I wanted to know what my other options are.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 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,

                        ],
                    ),
                ),
        );

推荐答案

这是为将来的读者提供的更通用的答案.

This is a more generalized answer for future readers.

在Flutter中，我们通常谈论在小部件周围而不是在边距周围添加填充. Container窗口小部件确实具有margin参数，但是即使这样，它也只是在内部用Padding小部件来包装它的孩子(以及孩子具有的任何装饰).

In Flutter we generally talk about adding Padding around a widget rather than margin. The Container widget does have a margin parameter, but even this just wraps it child (and any decoration that the child has) with a Padding widget internally.

所以，如果您有这样的事情

So if you have something like this

您想要在小部件周围添加一些空间

and you want to add some space around the widget like this

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

then you just wrap the widget with Padding. This is easy to do if you put your cursor on the widget name and press Alt+Enter (or Option+Return on a Mac) in Android Studio. Then choose Add padding from the menu.

这给你这样的东西

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

EdgeInsets的含义

设置填充时，不能直接使用整数或双精度.您必须使用EdgeInsets指定空间(逻辑像素数).您可以一次设置所有侧面(如上例所示)，也可以像这样单独设置它们:

Meaning of EdgeInsets

When you are setting padding you can't directly use an integer or double. You have to specify the space (number of logical pixels) using the EdgeInsets. You can set all of the sides at once (as we saw in the example above), or you can set them individually like this:

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

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

Since in this example left and right are the same and top and bottom are the same, we can simplify EdgeInsets to

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

使用容器设置填充和边距

另一种方法是将窗口小部件包装在容器中.容器窗口小部件同时具有padding和margin属性. (不过，只有在您还添加背景色或边框等装饰时，才需要这样做.)

Using a Container to set padding and margin

An alternate method is to wrap your widget in a Container. The Container widget has both a padding and a margin property. (This would only be necessary, though, if you were also adding a decoration like background color or a border.)

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

这篇关于如何为小部件添加边距?了解EdgeInsets的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！