Flutter中如何动态控制TextField的hintText（仿苹果时钟效果）

要实现苹果时钟定时器标签的TextField效果，同时解决控制器内容丢失的问题，你可以按以下步骤修改代码：

1. 修复控制器内容丢失问题 #

你当前使用Provider.autoDispose会在组件失去监听时自动销毁控制器，导致输入内容丢失。只需移除autoDispose，让控制器在页面导航离开前保持存活：

// 移除autoDispose，确保控制器在页面未离开时保留输入内容
final textEditingControllerProvider = Provider((ref) => TextEditingController());
final taskEditingController = textEditingControllerProvider;

2. 实现动态提示/文本样式效果 #

通过监听控制器的文本变化，动态调整hintStyle和textStyle，实现初始半透明提示、输入后显示不透明文本的效果：

Consumer<TextEditingController>(
  builder: (context, controller, child) {
    return TextField(
      decoration: InputDecoration(
        border: InputBorder.none,
        hintText: 'math', // 初始提示文本
        hintStyle: TextStyle(
          fontSize: 17,
          // 无输入时显示半透明提示，有输入时隐藏提示
          color: controller.text.isEmpty 
              ? Colors.grey.withOpacity(0.7) 
              : Colors.transparent,
        ),
      ),
      style: TextStyle(
        fontSize: 17,
        // 无输入时隐藏文本（实际为空不影响），有输入时显示不透明文本
        color: controller.text.isEmpty 
            ? Colors.transparent 
            : Colors.grey.withOpacity(1.0),
      ),
      controller: controller,
      // 可选：设置输入框行为与苹果时钟一致，比如失去焦点时保留内容
      onSubmitted: (value) => FocusScope.of(context).unfocus(),
    );
  },
)

说明 #

• 当输入框为空时，显示半透明的"math"提示文本；
• 用户输入内容后，提示文本自动隐藏，输入的内容以不透明样式显示；
• 控制器会在页面导航离开时被销毁（Provider的生命周期与页面绑定），完全匹配苹果时钟的逻辑。

内容的提问来源于stack exchange，提问作者Milan Labus