Question

我是新来的人。

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

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

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

这是我的平均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;
                                    }),

有什么想法吗？

Answer 1

将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

Answer 2

要在“焦点”详细信息中添加所需的文本格式字段，您将需要包括几件事。首先，您将需要一个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：当textformfield获得焦点或失去焦点时，如何显示或隐藏标签/文本小部件？

2 个答案: