InputDecoration 小部件上的 Flutter labelText 在字段输入期间和之后消失

Question

我最近将 Dart、Flutter、插件升级到最新版本，并迁移了我的应用程序以符合 null-safety。现在，当我将光标放在输入字段上并输入数据时，输入字段上的标签消失了。我的输入字段定义没有任何变化，如下所示：

  TextField _buildRestaurantNameTextField() {
    return TextField(
      style: Theme.of(context).inputDecorationTheme.labelStyle,
      controller: _restaurantNameController,
      focusNode: _restaurantNameFocusNode,
      textCapitalization: TextCapitalization.words,
      cursorColor: Colors.black,
      decoration: InputDecoration(
        labelText: 'Restaurant name',
        errorText: model!.restaurantNameErrorText,
        enabled: model!.isLoading == false,
      ),
      autocorrect: false,
      enableSuggestions: false,
      enableInteractiveSelection: false,
      keyboardType: TextInputType.text,
      textInputAction: TextInputAction.next,
      onChanged: model!.updateRestaurantName,
      onEditingComplete: () => _restaurantNameEditingComplete(),
    );
  }

这是 Flutter 医生的输出：

[✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.2 20G95 darwin-arm, locale en-GB)
    • Flutter version 2.5.0 at /Users/ernestocuesy/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4cc385b4b8 (9 days ago), 2021-09-07 23:01:49 -0700
    • Engine revision f0826da7ef
    • Dart version 2.14.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/ernestocuesy/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[✓] VS Code (version 1.60.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.26.0

[✓] Connected device (1 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 11 (API 30) (emulator)

• No issues found!

我附上迁移前后的屏幕截图。我已经尝试了很多事情，从评论样式属性到尝试 floatingLabelStyle、字体大小、间距和标签总是消失。 Android 模拟器和物理 Android 设备都会出现此问题。我还没有尝试 iOS 因为我需要解决 CocoaPods 问题。

感谢您的帮助

Answer 1

问题原来与 ThemeData class 中的 floatingLabelBehaviour 有关。该值一直是 FloatingLabelBehavior.never，这意味着 标签将始终位于内容中或根据文档隐藏 。因此，似乎是正确的行为。但出于某种原因，这种行为只发生在我升级之后。今后的解决方案是更改为 FloatingLabelBehavior.auto 或 FloatingLabelBehavior.always.

InputDecoration 小部件上的 Flutter labelText 在字段输入期间和之后消失

Flutter labelText on an InputDecoration widget disappears during and after field input

label

input

textfield

dart

flutter