如何不仅在单击中单击时始终在文本字段中始终显示提示? [英] How to always show hint in text field not only when it is clicked in flutter?

问题描述

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

I have a custom text field but as shown in the picture, the bottom text fields looks so vague and empty, I'd like to keep the hint showing even if the field is not focused, how do I achieve that in flutter?

这是我的小部件代码:

 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),
                          ),
                    ),
                  ),

推荐答案

理想地，在Flutter中，您不能执行此操作，因为hintText和labelText的行为方式不同.只要用户不关注labelText，它就会显示为hintText.用户单击TextField时，labelText会设置为特定位置的动画，而hintText仍然可见，直到用户键入内容为止.

Ideally in Flutter you cannot do this as both hintText and labelText behave in two different ways. labelText is shown as hintText as long as the user does not focus on it. As soon as the user clicks on the TextField, the labelText animates to a specific position whereas a hintText remains visible until the user types something.

因此，同时使用labelText和hintText并没有任何意义，因为TextField会在给标签添加动画时擦除hintText.

So using labelText and hintText together, does not make any sense as the TextField will wipe of the hintText while animating the label.

但是，您无需付出额外的努力，就可以使用Stack小部件来解决您的问题.

However with some extra effort, you can use Stack widget to solve your problem.

声明一个类变量(相关类内的变量，在任何代码块之外)以存储TextEditingController.

Declare a class variable (a variable within the concerned class, outside any block of code) to store a TextEditingController.

TextEditingController _controller;

并在您的类的initState()中初始化

And initialize in your class' 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 小部件不显示任何内容.

Basic Logic of the above code: If the TextField does not have any text then display the (hint) Text widget else don't display anything.

这篇关于如何不仅在单击中单击时始终在文本字段中始终显示提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！