标签文字在键入时在错误的位置显示

Question

如下图所示，第一个图像在单击它之前显示我的文本字段。第二张图像在开始键入和单击它后显示其显示的方式。我想在键入时删除该标签文本显示。我该怎么做？

TextFormField(
  controller: usernameEditingController,
  decoration: InputDecoration(
      fillColor: textWhite,
      filled: true,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(
          color: textdarkBlue,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(
          color: textdarkBlue,
        ),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(color: Colors.red),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(color: Colors.red),
      ),
      isDense: true,
      contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
      labelText: "User Name",
      labelStyle: TextStyle(
        fontSize: 15,
        color: textdarkBlue,
      ),
      hintText: "ex: James",
      hintStyle: TextStyle(
          color: textdarkBlue,
          fontFamily: "Paralucent",
          fontSize: 14)),
  style: TextStyle(
    color: textdarkBlue,
  ),
  validator: (text) {
    if (text!.isEmpty) {
      return "Username can't be empty";
    } else {
      return null;
    }
  },
  onChanged: (String? text) {
    userName = text!;
    //print(userName);
  },
),

Answer 1

它显示为utlineinputborder的行为。
有几种不同的方法，一种使用focusnode，目标是在焦点更改上提供labelText：null。

 String userName = "";

  late FocusNode focusNode = FocusNode()
    ..addListener(() {
      setState(() {});
    });

.....
TextFormField(
  // controller: usernameEditingController,
  focusNode: focusNode,
  decoration: InputDecoration(
      labelText: focusNode.hasFocus ? null : "User Name",

Answer 2

这就是labelText属性的行为，如果您不想要它，只需删除它并使用shinttext

TextFormField(
  controller: usernameEditingController,
  decoration: InputDecoration(
      fillColor: textWhite,
      filled: true,
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(
          color: textdarkBlue,
        ),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(
          color: textdarkBlue,
        ),
      ),
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(color: Colors.red),
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20.0),
        borderSide: const BorderSide(color: Colors.red),
      ),
      isDense: true,
      contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
      
      hintText: "ex: James",
      hintStyle: TextStyle(
          color: textdarkBlue,
          fontFamily: "Paralucent",
          fontSize: 14)),
  style: TextStyle(
    color: textdarkBlue,
  ),
  validator: (text) {
    if (text!.isEmpty) {
      return "Username can't be empty";
    } else {
      return null;
    }
  },
  onChanged: (String? text) {
    userName = text!;
    //print(userName);
  },
),