【问题标题】:How to add a static unit (text) to a TextFormField in Flutter?如何在 Flutter 中向 TextFormField 添加静态单元(文本)?
【发布时间】:2021-03-04 21:44:26
【问题描述】:

我目前有这个带有提示文本的TextFormField

目标是在 TextFormField 中添加 Units,无论用户是否在输入。它应该看起来像这样:

如何做到这一点? 另外,如何使值居中?

这是我当前的 TextFormField 代码:

TextFormField(
  decoration: InputDecoration(
    hintText: '0.0',
    contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
    filled: true,
    fillColor: Colors.white24,
    floatingLabelBehavior: FloatingLabelBehavior.never,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide.none,
    ),
    counterText: '',
  ),
),

【问题讨论】:

    标签: flutter dart textfield


    【解决方案1】:

    TextFormField 装饰可以是suffixText 属性

         TextFormField(
           controller: c,
           // align to center
           textAlign: TextAlign.center,
           decoration:  InputDecoration(
             hintText: '0.0',
             // show kg
             suffixText: 'Kg',
         )
    

    文本可以使用textAlign 属性居中

    【讨论】:

    【解决方案2】:

    一种方法是在容器内的行内使用 TextFormField 和文本 这样的事情可以提供帮助

    Container(
              child: Row(
                children: [TextFormField(), Text('Kg')],
              ),
            ),
    

    另一种方式是你可以使用

    TextFormField(
                    decoration: InputDecoration(suffixText: 'Kg'),
                  ),
    

    但这里的问题是,当启用 TextFormField 时,您只会获得后缀文本,您可以尝试使其始终可见的一种解决方法是使用 autovalidate 之类的属性

    TextFormField(
                    autovalidateMode: AutovalidateMode.always,
                    decoration: InputDecoration(suffixText: 'Kg'),
                  ),
    

    我没有测试过这个 autovalidateMode 但它应该可以正常工作。

    【讨论】:

    • 谢谢,但 AutovalidateMode 不会带来焦点,所以后缀保持隐藏,但没问题:)。您建议的第一种方法的问题是文本将在 TextFormField 之外,但我可以用 BoxDecoration 包装行,感谢您带路:D
    • 是的,您可以使用 Container() 的 decoration 属性来添加 boxDecoration ,您也可以完全固定容器的大小,无论如何欢迎您,如果有帮助,请将答案标记为已接受你?
    猜你喜欢
    • 2019-06-09
    • 2020-08-01
    • 2021-10-05
    • 2021-02-17
    • 2020-05-04
    • 2014-08-13
    • 1970-01-01
    • 2021-06-04
    • 2020-06-18
    相关资源
    最近更新 更多