如何始终在文本字段中显示提示，而不仅仅是在颤振中单击提示？

Question

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

这里是我的小部件代码：

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

Answer 1

有办法解决这个问题。使用labelText属性并设置floatingLabelBehavior:floatingLabelBehavior。永远不要。

这样，您将始终看到提示，当用户单击文本字段时，提示消失。

Answer 2

理想情况下，在Flutter中，您不能这样做，因为hintText和labelText都有两种不同的行为方式。只要用户不关注hintText，labelText就会显示为hintText。只要用户单击TextField，labelText就会动画显示到特定位置，而hintText在用户键入某些内容之前仍然可见。

因此，同时使用labelText和hintText没有任何意义，因为在设置标签动画时，文本字段将擦除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();
               ],
             ),
                  ),

上述代码的基本逻辑：如果文本字段没有任何文本，则显示（提示）textwidget，否则不显示任何内容。

Answer 3

如果希望标签在文本字段顶部可见，同时显示提示，只需添加：

floatingLabelBehavior: FloatingLabelBehavior.always

到文本字段输入装饰（装饰）。

（在撰写本文时，有一个bug只会在焦点时显示提示和后缀，这已在最近的PR中修复，很快就会发布，请参阅GitHub问题）

完整示例

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