Question

我不熟悉flutter，正在创建登录表单，为此我使用了TextField并添加了前缀图标，但是在文本字段之间（用户ID和Pin）以及前缀图标之前，我得到了一些额外的空格。我也尝试了InputDecorationTheme，但是没有用。

请让我知道如何删除或减少空间。？

下面是我的代码：

TextField(
  maxLength: 8,
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    hintText: hint,
    hintStyle: TextStyle(fontSize: 12.0),
    prefixIcon: Icon(icon),
    counterText: '',
  ),
)

Answer 1

通过向prefixIcon添加前缀约束并像这样填充

，就可以轻松实现这一目标

      TextFormField(
         enabled: true,
         decoration: InputDecoration(
         prefixIconConstraints:BoxConstraints(minWidth: 23, maxHeight: 20),
         prefixIcon: Padding(
                       padding: const EdgeInsets.only(right: 20),
                       child: Icon(
                                Icons.email,
                                color: clockColor,
                               ),
                        ),
         hintText:"Email Address"
         hintStyle:TextStyle(color: hintColor, fontSize: 14),
       ),
    ),

这里是输出，希望对您有帮助

Answer 2

从flutter 1.17.5（与1.2X相同）开始，以完全完全删除或手动操作填充，首先必须设置isDense: true，然后可以根据需要调整contentPadding或在父小部件上应用填充。

TextField(
  inputDecorationTheme: InputDecorationTheme(
     isDense: true,
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
  ),
)

Answer 3

您可以使用InputDecoration的contentPadding。这是示例代码

TextField(
   maxLines: 8,
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: 5),
      labelText: 'Description',
      labelStyle: txtHintStyle,
   )
 )

Answer 4

您可以通过降低TextField的高度来尝试此技巧

SizedBox(
  height: 44, // set this
  child: TextField(),
)

Answer 5

您可以使用：

TextField(
   maxLines: 1,
   decoration: InputDecoration(contentPadding: EdgeInsets.only(bottom: -10.0))
 )

Answer 6

根据文档，该prefixIcon已包含12.0的填充。因此，您无需提供额外的填充。

请参见下面的说明和代码，您可以在input_decorator.dart中找到。

前缀图标的最小尺寸为48px x 48px，但可以扩展到更多。任何大于24像素的像素需要额外的填充以确保其符合材料规格输入的左边缘和输入的前沿之间的12px填充前缀图标。填充前缀图标的前沿：

prefixIcon: Padding(
     padding: const EdgeInsetsDirectional.only(start: 12.0),
     child: myIcon, // icon is 48px widget.
)

我希望它会有所帮助。

Answer 7

我来晚了一点，但是您唯一要做的就是使用负填充：

TextField(
   decoration: InputDecoration(
      contentPadding: EdgeInsets.symmetric(vertical: -5),
      labelText: 'Description',
   )
 )

Answer 8

通过使用

应用减号填充

transform: Matrix4.translationValues(-10.0, 0.0, 0.0),

图标容器内的行上方

TextFormField(
          keyboardType: TextInputType.number,
          style: new TextStyle(color: Colors.white, fontSize: 17),
          decoration: new InputDecoration(
              prefixIcon: Container(
                transform: Matrix4.translationValues(-10.0, 0.0, 0.0),
                child: Icon(
                  Icons.vpn_key,
                  color: Colors.white,
                ),
              ),
              labelText: "Enter Password",
              labelStyle: new TextStyle(color: Colors.white)),
        ),

Answer 9

我必须实现类似的目标，但是找不到完美的解决方案。提出并解决使用Stack小部件的问题。

Widget _username(context){
  return SizedBox(
    height: 35,
    child: Stack(
      children: <Widget>[
        Align(
          alignment: Alignment.centerLeft,
          child: Icon(
            Icons.mail,
            size: 20,
            color: Theme.of(context).accentColor,
          ),
        ),
        TextField(
          style: TextStyle(
              color: Colors.white
          ),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 11.0, horizontal: 33.0),
            hasFloatingPlaceholder: false,
            labelText: 'Username',
            labelStyle: TextStyle(
                color: Colors.white
            ),
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).accentColor,
                )
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ]
    ),
  );
}

SizedBox用于控制垂直填充。对于水平填充，将Icon和TextField堆叠在一起。结果是在Icon上方重叠了TextField的标签，因此contentPadding属性用于将标签向右移动。有了这个，我实现了以下外观。

Answer 10

对于那些在 TextFormField 中挣扎的人来说，suffixIcon 或 prefixIcon 由于 48x 填充而不允许变小，您可以通过用 { 包裹它来实现这一点{1}} 将强制子项（在本例中为 IntrinsicHeight）缩小到更合理的大小，主要是将其大小调整为输入字体大小 + 任何装饰填充。

但是，请记住，这应该只是一种解决方法，并且应该有一个选项可以手动设置图标填充。使用此解决方案，如果您的图标大于 TextFormField 输入文本，它不会在意，图标会溢出框。

Answer 11

我尝试了很多方法，但只对我有用。如果要删除 Prefix 图标的左填充，请将 prefixIconConstraints:BoxConstraints(maxHeight: 20) 赋予 InpuDecoration。

TextField(
      autocorrect: false,
      textAlignVertical: TextAlignVertical.bottom,
      onSubmitted: (value) {
        getXHelper.textFieldSubmit(value, type);
      },
      decoration: InputDecoration(
        isDense: true,
        prefixIconConstraints:BoxConstraints(maxHeight: 20) ,
        hintText: placeHolder,
        prefixIcon: Padding(
          padding: const EdgeInsets.only(top: 0, right: 5, bottom: 0),
          child: Icon(
            icon,
            size: 20,
          ),
        ),
        suffixIcon: type == TextFieldType.password ? passShowButton : null,
      ),
      controller: controller,
      cursorColor: Colors.black,
      style:
          TextStyle(color: Colors.black, fontFamily: AppFontFamily.fontFamily),
    );

Please check the screen shot

如何从TextField删除内容填充？

11 个答案: