如何为我的小部件添加边距?了解 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

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

                        ],
                    ),
                ),
        );

推荐答案

如何为小部件添加边距

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

How to add margin to a widget

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 在 Mac 上)在 Android Studio 中.然后从菜单中选择添加填充.

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

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

另一种方法是将您的小部件包装在一个容器中.Container 小部件同时具有 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屋！