我正试着把我的头脑围绕在摆动的UI位置上.所以我现在有一个看起来像这样的东西 enter image description here

我想添加一些空格b/w搜索文本字段和按钮. 这就是我的代码的控制部分.我试着设计我的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,

                        ],
                    ),
                ),
        );

推荐答案

如何向小工具添加边距

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

如果你有这样的东西

enter image description here

您希望在小部件周围添加一些空间,如下所示

enter image description here

然后,您只需用填充将小部件包装起来.如果将光标放在小部件名称上,然后在Android Studio中按Alt+Enter(或者在Mac上按Option+Return),就很容易做到这一点.然后从菜单中 Select Add padding.

enter image description here

这给了你类似的东西

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

边缘集的意义

设置填充时,不能直接使用整数或双精度.您必须使用EdgeInsets指定空间(逻辑像素数).您可以一次设置所有边(如我们在上面的示例中看到的),也可以像这样分别设置它们:

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

由于在本例中,leftright相同,topbottom相同,因此我们可以将边集简化为

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

使用容器设置填充和边距

另一种方法是将小部件包装在容器中.Container构件同时具有填充和边距属性.(不过,只有在添加背景色或边框等装饰时才需要这样做.)

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

enter image description here

Flutter相关问答推荐

Flutter:如何在盒子内创建图像带borderDecoration Radius带文本

Flutter:如何从Bottom Navigator中删除此内容

点击表情符号按钮后,Flutter 文本域文本编辑控制器将文本恢复为原始值

分页控制器在到达页面末尾之前或在初始化页面时对每个索引调用API

将记录/元组用作SplayTreeMap中的键

如何在 Flutter 中设计像 zomato 应用程序一样的搜索字段?

当 Dart SDK 版本范围不匹配时,为什么依赖解析器不会抛出错误?

Flutter:如何在现有布局之上显示圆角布局?

Flutter如何在容器外创建环形进度条

通过在父窗口小部件功能上设置状态来浏览屏幕

如何让小部件根据小部件的大小构建不同的布局?

在向 Google Route API 发送 HTTP Post 请求期间发生错误,

Android Studio - Electric Eel 2022.1.1 更新 destruct 了 dart 文件图标

如何在 flutter 中使用 tabbar 作为底部导航栏?

如何将金钱格式化为数以百万计的Flutter 动?

避免长单词中断

如何防止卡子在底部溢出?

Flutter 中父容器顶部的 Gridview 间距额外区域

Flutter - 检测手指何时进入容器

Flutter_riverpod 安装时出现问题