如何從 TextField 中刪除內容填充？

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

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

從顫振 1.17.5 開始（在 2.X 中仍然相同）要完全手動刪除或操作填充，首先您必須設置isDense: true然后您可以根據需要調整contentPadding或在父小部件上應用填充.

// using theme
ThemeData(
  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),
     ...
  ),
)

// per widget
TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
     ...
   ),
)

正如Ataberk的評論中提到的，您還可以使用contentPadding: EdgeInsets.zero

TextField(
   decoration: InputDecoration(
     isDense: true,
     contentPadding: EdgeInsets.zero,
     ...
   ),
)

Answer 2

您可以使用 InputDecoration 的contentPadding 。 這是示例代碼

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

Answer 3

我可以通過向 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),
       ),
    ),

這是輸出，希望這有幫助

Answer 4

我來的有點晚，但你唯一要做的就是使用負填充：

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

Answer 5

通過使用應用減號填充

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 6

您可以通過降低TextField的高度來嘗試這個技巧

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

Answer 7

您可以使用：

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

Answer 8

根據文檔，該 prefixIcon 已經包含 12.0 的填充。 所以你不需要提供額外的填充。

請參閱下面的說明和代碼，您可以在 input_decorator.dart 中找到。

前綴圖標的最小尺寸限制為 48 像素 x 48 像素，但可以擴展超出此范圍。 任何大於 24 像素的東西都需要額外的填充，以確保它與輸入的左邊緣和前綴圖標的前邊緣之間的 12 像素填充的材質規范相匹配。 填充前綴圖標的前緣：

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

我希望它會有所幫助。

Answer 9

我嘗試了很多方法，但只對我有用。 如果要刪除前綴圖標的左側填充， 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),
    );

請檢查屏幕截圖

Answer 10

刪除前綴圖標

Row(
  children: [
    //add icon  
    Icon(Icons.person,color: Colors.grey,),
    Flexible(
      child: TextFormField(
        decoration:  InputDecoration(
          border: InputBorder.none,
          hintText: 'User Id',
          contentPadding: EdgeInsets.all(0.0),//add content padding
          isDense: true,//add isDense
        ),
      ),
    ),
  ],
),
//add some space between two row
SizedBox(height: 10,),
Row(
  children: [
    Icon(Icons.lock,color: Colors.grey,),
    Flexible(
      child: TextFormField(
        decoration:  InputDecoration(
          border: InputBorder.none,
          hintText: 'Pin',
          contentPadding: EdgeInsets.all(0.0),
          isDense: true,
        ),
      ),
    ),
  ],
),

Answer 11

我必須實現類似的目標，但找不到完美的解決方案。 想出並解決使用 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 12

我是不熟悉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 13

替換 prefixIcon-> 前綴

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

Answer 14

您可以為 TextFeild 設置此值

   decoration: InputDecoration(
   isDense: true,
   contentPadding: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
   ...
 )

Answer 15

TextField(
   decoration: InputDecoration(
      isDense: true, //Set this to true
      contentPadding: EdgeInsets.symmetric(vertical: 0),
      hintText: 'Description',
   )
 )

設置isDense: true將使您完全控制設置contentPadding 。 確保設置EdgeInsets. 作為你的需要。