如何在文本字段颤动中删除 suffixIcon 的填充

Posted 2023-05-07

【中文标题】如何在文本字段颤动中删除 suffixIcon 的填充

【英文标题】：How to remove padding of suffixIcon in textfield flutter

【发布时间】：2021-05-22 02:53:51

【问题描述】：

我有一个创建文本字段的函数

  Widget _createNormalTextField(
  String hintTxt,
  TextEditingController controller,
  TextInputType inputType,
  String Function(String) validation,
  Function(String) onTextChanged,
  int length,
  Widget suffixIcon) 
return Container(
  margin: EdgeInsets.symmetric(vertical: 8),
  child: new TextFormField(
      controller: controller,
      maxLength: length,
      keyboardType: inputType,
      validator: validation,
      onChanged: onTextChanged,
      decoration: InputDecoration(
        contentPadding: EdgeInsets.only(bottom: -10.0),
        suffixIcon: suffixIcon,
        hintText: hintTxt,
      )),
);

我正在创建几个这样的文本字段：

Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Expanded(flex: 2, child: Text("Discount")),
          SizedBox(
            width: 4,
          ),
          Expanded(
            flex: 1,
            child: _createNormalTextField(
                "", _discountPercentController, TextInputType.number, null,
                (txt) 
              setState(() 
                calculateAmount(txt);
              );
            , 2, Text("%")),
          ),
          SizedBox(
            width: 4,
          ),
          Expanded(
            flex: 2,
            child: _createNormalTextField(
                "Amount",
                _discountAmountController,
                TextInputType.number,
                null,
                (txt) ,
                5,
                null),
          ),
        ],
      ),
    ],
  );

我使用 '%' 文本作为后缀图标。但它会在中间创建 '%' 并采用我不想要的填充。 我附上了我得到的和我想要的图片：

我明白了：

我想要右下角的后缀图标，比如::

那么有人知道解决方法吗？？

【参考方案1】：

您可以在下面复制粘贴运行完整代码 您可以将suffixIcon 与suffixIconConstraints 一起使用 代码sn-p

    decoration: InputDecoration(
            contentPadding: EdgeInsets.only(bottom: -10.0),
            suffixIcon: suffixIcon,
            suffixIconConstraints: BoxConstraints(maxHeight: 14),
            hintText: hintTxt,
          )),

工作演示

完整代码

import 'package:flutter/material.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  TextEditingController _discountPercentController = TextEditingController();
  TextEditingController _discountAmountController = TextEditingController();

  Widget _createNormalTextField(
      String hintTxt,
      TextEditingController controller,
      TextInputType inputType,
      String Function(String) validation,
      Function(String) onTextChanged,
      int length,
      Widget suffixIcon) 
    return Container(
      margin: EdgeInsets.symmetric(vertical: 8),
      child: TextFormField(
          controller: controller,
          maxLength: length,
          keyboardType: inputType,
          validator: validation,
          onChanged: onTextChanged,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.only(bottom: -10.0),
            suffixIcon: suffixIcon,
            suffixIconConstraints: BoxConstraints(maxHeight: 14),
            hintText: hintTxt,
          )),
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
            child: Column(
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Expanded(flex: 2, child: Text("Discount")),
                SizedBox(
                  width: 4,
                ),
                Expanded(
                  flex: 1,
                  child: _createNormalTextField("", _discountPercentController,
                      TextInputType.number, null, (txt) 
                    setState(() 
                      //calculateAmount(txt);
                    );
                  , 2, Text("%")),
                ),
                SizedBox(
                  width: 4,
                ),
                Expanded(
                  flex: 2,
                  child: _createNormalTextField(
                      "Amount",
                      _discountAmountController,
                      TextInputType.number,
                      null,
                      (txt) ,
                      5,
                      null),
                ),
              ],
            ),
          ],
        )));
  

【讨论】：

它可以工作，但是只有在选择文本字段时才会显示后缀，有什么解决方法吗？

我已经更新了我的答案，你仍然可以使用 suffixIcon 并添加 suffixIconConstraints: BoxConstraints(maxHeight: 14)