Flutter Hooks 中 TextField 文本选中问题的分析与解决

问题现象

在 Flutter Web 应用中，当使用 TextEditingController 动态更新 TextField 的文本内容时，会出现一个特殊现象：每次更新文本后，TextField 中的内容会被自动全选。这导致用户无法正常输入，因为每次按键都会替换掉整个文本内容。

问题复现

这个问题可以通过以下代码复现：

class MyTextInput extends StatefulWidget {
  @override
  State<MyTextInput> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyTextInput> {
  var textValue = '初始值';
  final controller = TextEditingController(text: '初始值');

  @override
  void initState() {
    super.initState();
    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        textValue = '更新时间 ${DateTime.now()}';
        controller.text = textValue;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(controller: controller);
  }
}

问题分析

1. 平台特异性：该问题仅出现在 Web 平台，Android 和 iOS 上表现正常
2. 状态管理方式无关：无论是使用 StatefulWidget 还是 HookWidget 都会出现相同问题
3. 根本原因：直接设置 controller.text 会导致 Web 平台上的文本选择状态重置

解决方案

推荐解决方案

使用 TextEditingValue 替代直接设置 text 属性，明确指定光标位置：

controller.value = TextEditingValue(
  text: textValue,
  selection: TextSelection.collapsed(offset: textValue.length),
);

其他注意事项

1. 性能考虑：频繁更新 TextField 内容（如示例中的每秒更新）可能会影响性能
2. 用户体验：在实时更新内容的同时，需要考虑如何保持用户输入体验
3. 跨平台一致性：虽然问题主要出现在 Web 平台，但使用推荐解决方案可以保证所有平台行为一致

深入理解

在 Flutter 的 Web 实现中，TextField 的文本选择行为与原生平台有所不同。当直接设置 controller.text 时：

1. Web 引擎会认为这是一个全新的文本输入
2. 默认行为是将新文本全选，方便用户立即替换
3. 这种行为在原生平台上有不同的实现，因此不会出现同样问题

通过显式设置 TextEditingValue 的 selection 属性，我们可以精确控制光标位置，避免自动全选行为，从而提供更好的用户体验。