Flutter中FutureBuilder因TextField重建致键盘消失问题求助

每次输入文本触发组件重建时，你在FutureBuilder的future参数中直接调用createOrGetExistingNote(context)，这会导致每次build执行都生成新的Future实例。FutureBuilder识别到新的异步任务后会重新执行流程，重建子组件，进而导致TextField被销毁重建，键盘失去焦点频繁消失。

1. 持久化Future实例 #

在State类中添加成员变量存储Future，确保它仅在组件初始化时执行一次，而非每次build都重新创建：

class _CreateUpdateNoteViewState extends State<CreateUpdateNoteView> {
  CloudNote? _note;
  late final FirebaseCloudStorage _notesService;
  late final TextEditingController _textController;
  // 新增变量保存Future实例
  late final Future<CloudNote> _noteFuture;

  @override
  void initState() {
    _notesService = FirebaseCloudStorage();
    _textController = TextEditingController();
    // 初始化Future，仅执行一次
    _noteFuture = createOrGetExistingNote(context);
    super.initState();
  }

2. 修改FutureBuilder的数据源 #

将FutureBuilder的future参数改为使用上述持久化的_noteFuture：

FutureBuilder(
  future: _noteFuture, // 使用保存的Future实例
  builder: (context, snapshot) {
    switch (snapshot.connectionState) {
      case ConnectionState.done:
        final note = snapshot.data!;
        // 仅首次完成时初始化数据和控制器文本
        if (_note == null) {
          _note = note;
          _textController.text = note.text;
        }
        // 避免重复添加监听器
        if (!_textController.hasListeners) {
          _setupTextControllerListener();
        }
        return TextField(
          controller: _textController,
          keyboardType: TextInputType.multiline,
          maxLines: null,
          decoration: const InputDecoration(
            hintText: 'Inzia a scrivere la tua nuova nota...',
          ),
        );

      default:
        return const Center(child: CircularProgressIndicator());
    }
  },
)

3. 调整createOrGetExistingNote方法逻辑 #

移除方法中直接给_textController.text赋值的代码，避免时序问题：

Future<CloudNote> createOrGetExistingNote(BuildContext context) async {
  final widgetNote = context.getArgument<CloudNote>();

  if (widgetNote != null) {
    return widgetNote;
  }

  final existingNote = _note;
  if (existingNote != null) {
    return existingNote;
  }
  final currentUser = AuthService.firebase().currentUser!;
  final userId = currentUser.id;
  final newNote = await _notesService.createNewNote(ownerUserId: userId);
  return newNote;
}

输入文本时_textControllerListener会频繁触发Firebase更新，建议添加防抖减少接口调用：

// 引入dart:async的Timer
Timer? _debounceTimer;

void _textControllerListener() {
  final note = _note;
  if (note == null) {
    return;
  }
  final text = _textController.text;
  // 延迟500ms执行更新，避免频繁调用
  _debounceTimer?.cancel();
  _debounceTimer = Timer(const Duration(milliseconds: 500), () async {
    await _notesService.updateNote(
      documentId: note.documentId,
      text: text,
    );
  });
}

// 在dispose中清理Timer
@override
void dispose() {
  _debounceTimer?.cancel();
  _deleteNoteIfTextIsEmpty();
  _saveNoteIfTextNotEmpty();
  _textController.dispose();
  super.dispose();
}

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