不仅在颤动中单击它时，如何始终在文本字段中显示提示？

Posted 2023-02-23

【中文标题】不仅在颤动中单击它时，如何始终在文本字段中显示提示？

【英文标题】：How to always show hint in text field not only when it is clicked in flutter?

【发布时间】：2020-01-05 14:45:17

【问题描述】：

我有一个自定义文本字段，但如图所示，底部文本字段看起来很模糊和空，即使字段没有聚焦，我想保持提示显示，我如何在颤振中实现这一点?

这是我的小部件代码：

 Container(
                    margin: EdgeInsets.all(20),
                    child: TextFormField(
                      autofocus: true,
                      textAlign: TextAlign.right,
                      decoration: InputDecoration(
                          enabledBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          hintText: AppStrings.email,
                          labelText: AppStrings.email,
                          alignLabelWithHint: true,

                          hintStyle: TextStyle(color: AppColors.primaryColorLight),
                          ),
                    ),
                  ),

【问题讨论】：

我不确定我是否正确，但默认情况下，hintText 是可见的，即使你没有点击它。

@CopsOnRoad 很抱歉，这根本没有帮助

【参考方案1】：

有办法解决这个问题。 使用labelText 属性并设置floatingLabelBehavior: FloatingLabelBehavior.never。

这样您将始终看到提示，并且当用户单击 TextField 时，提示消失。

【参考方案2】：

如果您希望标签在 TextField 的顶部可见，并且同时显示提示，您只需添加：

floatingLabelBehavior: FloatingLabelBehavior.always

到TextFields InputDecoration（装饰）。

（在撰写本文时，有一个错误只会在焦点上显示提示和后缀，这已在最近的 PR 中修复，很快就会提供，请参阅 GitHub issue）

完整示例

TextFormField(
      controller: textController,
      style: theme.textTheme.bodyText2,
      keyboardType: keyboardType ?? TextInputType.number,
      enableInteractiveSelection: false,
      decoration: InputDecoration(
          labelText: labelText,
          labelStyle: theme.textTheme.headline6,
          suffixText: suffixText ?? '',
          border: OutlineInputBorder(
            borderSide:
                BorderSide(color: theme.textTheme.bodyText2.color, width: 2),
          ),
          hintText: '0.0',
          floatingLabelBehavior: FloatingLabelBehavior.always),
      validator: (value) 
        if (value.isEmpty) 
          return 'Please enter some text';
        
        return null;
      ,
      onChanged: (String text) => onChange(text),
    );

【讨论】：

"floatingLabelBehavior: FloatingLabelBehavior.always" 帮助了我。谢谢亲爱的。

【参考方案3】：

理想情况下，在 Flutter 中你不能这样做，因为 hintText 和 labelText 以两种不同的方式运行。只要用户不关注labelText，它就会显示为hintText。只要用户点击 TextField，labelText 就会动画到特定位置，而 hintText 保持可见，直到用户输入内容。

因此，同时使用 labelText 和 hintText 没有任何意义，因为 TextField 会在为标签设置动画时擦除 hintText。

不过，您可以通过一些额外的努力，使用Stack 小部件来解决您的问题。

声明一个类变量（相关类中的变量，任何代码块之外的变量）来存储TextEditingController。

TextEditingController _controller;

并在你的类中初始化'initState()，

_controller= TextEditingController();

解决方案代码：

    Container(
                    margin: EdgeInsets.all(20),
                    child: Stack(
                        children : <Widget>[
                          TextFormField(
                            autofocus: true,
                            textAlign: TextAlign.right,
                            decoration: InputDecoration(
                            enabledBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          focusedBorder: const OutlineInputBorder(
                            borderSide: const BorderSide(color: Color(0xff0E9447), width: 2.0),
                          ),
                          labelText: AppStrings.email,
                          alignLabelWithHint: true,

                          hintStyle: TextStyle(color: AppColors.primaryColorLight),
                          ),
                    ),
                   (_controller.text=="")
            ?
            Text(
              AppStrings.email,
              style: TextStyle(
                color: Colors.grey
           // Style it according to your requirement / To make it look like hintText
         ),
       )
            :
            Container();
               ],
             ),
                  ),

上述代码的基本逻辑：如果TextField没有任何文本则显示（提示）Text 其他小部件不显示任何内容。

【讨论】：

非常感谢 Mohit 成功了！只有一些修改列表将提示文本包装在墨水池中，并使其在点击时请求焦点到文本字段，因为我注意到当点击提示文本本身时没有任何反应。再次感谢

你是对的 Mohit，我认为我的回答实际上并没有增加更多价值，我必须删除它。但是我得到了 1 票，但我觉得不值得。