Flutter：当textformfield获得焦点或失去焦点时，如何显示或隐藏标签/文本小部件？

编程问答 2022-11-12

问题描述

我是新来的人。

我正在制作用户注册表格，我想要实现以下视觉效果：

当Form上的TextFormField正常时，它看起来像这样：

enter image description here

但是当textformfield处于“焦点”状态时，我需要以下内容。用户输入时，它看起来像这样：

enter image description here

这是我的平均textFormField 

TextFormField(
                                    initialValue: name,onChanged: (val) {
                                      setState(() {
                                        name = val;
                                        print(name);
                                      });
                                    },decoration: Inputdecoration(
                                      hintText: "Nombres",hintStyle: TextStyle(
                                          fontSize: scalador.setSp(22) * 2.63,color: Color(0xFF949494)),),style: TextStyle(
                                      color: Color(0xFF242427),fontSize: scalador.setSp(22) * 2.63,validator: (value) {
                                      if (value.isEmpty) {
                                        return 'Por favor ingrese su(s) Nombre(s)';
                                      } else {
                                        if (value.length < 4)
                                          return 'El nombre debe tener mas de 4 caracteres';
                                      }
                                      return null;
                                    }),

有什么想法吗？

解决方法

将labelText: 'Nombres',属性添加到InputDecoration中：

decoration: InputDecoration(
                                  hintText: "Nombres",hintStyle: TextStyle(
                                      fontSize: scalador.setSp(22) * 2.63,color: Color(0xFF949494)),),labelText: 'Nombres',)

来源：https://api.flutter.dev/flutter/material/TextFormField-class.html

,

要在“焦点”详细信息中添加所需的文本格式字段，您将需要包括几件事。首先，您将需要一个labelText，它将被设置为您选择的字符串。在您的情况下，可能是：labelText：“ Nombres”。接下来，您将需要一个enabledBorder：您可以根据自己的喜好将其分配给OutlineInputBorder（在其中可以指定边框半径，border Side（color））。当用户没有在“焦点”中拥有enableBorder后，您将需要focusedBorder：在该实例中，您将再次分配给OutlineInputBorder（），类似于enabledBorder。最后，您将需要边框：在其中可以为其提供OutlineInputBorder（以及所需的borderRadius在内）。

这是供您参考的示例

Padding(
  padding: EdgeInsets.all(10),child: new TextFormField(
    decoration: new InputDecoration(
      labelText: "Name",labelStyle: TextStyle(
        color: Color(0xFF264653),fillColor: Colors.white,enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),borderSide: BorderSide(
          color: Color(0xFF264653),focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(25.0),borderSide: BorderSide(color: Color(0xFF264653))),border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(25.0),

根据您要执行的操作，我建议您查看以下文章：https://medium.com/swlh/working-with-forms-in-flutter-a176cca9449a和/或
https://medium.com/@mahmudahsan/how-to-create-validate-and-save-form-in-flutter-e80b4d2a70a4

flutter-layout