打字时标签文本显示在错误的位置

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

这是 labelText 属性的行为，如果您不需要它，只需将其删除并改用 hintText

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

Answer 2

显示为OutlineInputBorder的行为。
有几种不同的方法，一种是使用 FocusNode，目标是提供 labelText:null 焦点变化。

 String userName = "";

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

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

打字时标签文本显示在错误的位置

label text is displaying at wrong place when typing

flutter

flutter-layout

flutter-textformfield