如何从 TextField 中删除内容填充？

Posted 2023-02-23

【中文标题】如何从 TextField 中删除内容填充？

【英文标题】：How do I remove content padding from TextField?

【发布时间】：2019-05-07 18:23:03

【问题描述】：

我是 Flutter 的新手，我正在创建登录表单，因为我使用了 TextField 并添加了前缀图标，但我在文本字段（用户 ID 和 pin）之间和前缀图标之前得到了一些额外的空格。我也尝试过 InputDecorationTheme 但它没有用。

请告诉我如何删除或减少空间。？？

下面是我的代码：

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

【问题讨论】：

您找到解决方案了吗？

@BrindaRathod 以防万一你还想知道。我碰巧遇到了同样的问题，并且对此有一种可靠的解决方案***.com/a/60018290/12402503

对于那些在 Flutter SDK 1.17.5 之后提出这个问题的人，请参阅这个答案***.com/a/63160454/6732069

【参考方案1】：

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

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

【讨论】：

感谢回复，但我想删除前缀图标前的额外空格

这正是我所需要的！

@Zubair Rehman 你找到去除 suffixIcon 左侧填充的方法了吗？

实际上，看看这个answer - 你需要isDense: true 来删除TextField 中的额外垂直空间

在我的情况下将 isDense 设置为 true 工作

【参考方案2】：

根据文档，该 prefixIcon 已经包含 12.0 的填充。 所以你不需要提供额外的填充。

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

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

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

我希望它会有所帮助。

【讨论】：

感谢您的回复@dhuma，但我想删除填充而不是添加更多填充:)

【参考方案3】：

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

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

【讨论】：

它工作正常，但需要使用EdgeInsets.all(your_value)

它在这里工作！耶稣，愿这永远有效！我正在使用 contentPadding: E​​dgeInsets.only(top: -26)

【参考方案4】：

通过使用

应用减号填充

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.***_key,
                  color: Colors.white,
                ),
              ),
              labelText: "Enter Password",
              labelStyle: new TextStyle(color: Colors.white)),
        ),

【参考方案5】：

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

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

【参考方案6】：

我必须实现类似的目标，但找不到完美的解决方案。想出并解决使用 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 属性用于将标签向右移动。有了这个，我实现了以下外观。

【参考方案7】：

我可以通过向 prefixIcon 添加前缀约束并用像这样的填充包装 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),
       ),
    ),

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

【参考方案8】：

你可以使用：

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

【参考方案9】：

更新（2021 年 4 月）：仍然在 Flutter 2.0.4 中工作

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

TextField(
  inputDecorationTheme: InputDecorationTheme(
     isDense: true,// this will remove the default content padding
     // now you can customize it here or add padding widget
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
  ),
)

【讨论】：

为什么 EdgeSymmetric.zero 似乎不起作用

【参考方案10】：

对于那些与suffixIcon 或prefixIcon 由于48x 填充而不允许更小的TextFormField 的人来说，您可以通过用IntrinsicHeight 包裹它来实现这一点，这将强制child (TextFormField 在这种情况下) 缩小到更合理的大小，主要是像输入字体大小 + 任何装饰填充一样。

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

【参考方案11】：

我尝试了很多方法，但对我来说效果很好。 如果要删除前缀图标的左侧填充，请将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

【参考方案12】：

替换prefixIcon->前缀

 TextFormField(
              decoration: InputDecoration(
                prefix:Icon(
                  Icons.perm_identity_outlined,
                  color: AppColors.primary,
                ),
                labelText:'UserName'
              ),
            )