不仅在颤动中单击它时，如何始终在文本字段中显示提示? [英] 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屋！