如何通过Provider存储TextEditingController文本变更，避免输入框光标跳转？

问题描述 #

开发笔记应用时采用Provider管理状态，选中List<Note>中的Note对象后，其title和content字段会显示在绑定TextEditingController的TextField组件中。修改输入框内容时调用Provider的update方法，但每次调用都会触发组件重建，TextField重建时TextEditingController被重新赋值文本，导致光标跳到输入框末尾。

已尝试无效方案：

• 使用context.read<Data>().update()，试图避免组件重建；
• 将TextField封装为独立组件，认为父组件重建时子组件不会跟随重建；
• 必须保留notifyListeners()以同步更新应用其他区域的数值，仅需解决光标跳转问题。

关键代码片段 #

Provider实现代码 #

class Data extends ChangeNotifier {
  List<Note> notes = [];
  Note selectedNote = Note('', ''); 
  
  void update({title = '', content = ''}) {
    // 未选中笔记时不执行操作
    if (selectedNote.title != '' || selectedNote.content != '') {
      if (title != '') selectedNote.title = title;
      if (content != '') selectedNote.content = content;
      notifyListeners();
      writeJson(); // 独立方法，与当前问题无关
    }
  }
}

展示页面状态类代码 #

class _NoteDetailState extends State<NoteDetail> {
  final TextEditingController noteTitleController = TextEditingController();
  final TextEditingController noteContentController = TextEditingController();

  @override
  void dispose() {
    noteContentController.dispose();
    noteTitleController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    Note? selectedNote = context.read<Data>().selectedNote;
    
    return DefaultTabController(
      // ...省略其他代码...
      body: TabBarView(
        children: [
          Container(
            margin: const EdgeInsets.all(18),
            child: ListView(
              children: [
                // 笔记标题输入框
                NoteTextField(
                  displayText: selectedNote.title,
                  controller: noteTitleController,
                  onChanged: (value) {
                    context.read<Data>().update(title: value);
                  },
                  minLines: 1,
                  style: Theme.of(context).textTheme.titleLarge!,
                ),
                // 笔记内容输入框
                NoteTextField(
                  displayText: selectedNote.content,
                  controller: noteContentController,
                  onChanged: (value) {
                    context.read<Data>().update(content: value);
                  },
                  minLines: 10,
                ),
        // ...省略更多代码...

NoteTextField组件代码 #

class NoteTextField extends StatelessWidget {
  const NoteTextField(
      {super.key,
      required this.displayText,
      required this.controller,
      required this.onChanged,
      required this.minLines,
      this.style});

  final String displayText;
  final TextEditingController controller;
  final Function(String) onChanged;
  final int minLines;
  final TextStyle? style;

  @override
  Widget build(BuildContext context) {
    controller.text = displayText;
    return Padding(
      padding: EdgeInsets.only(
        top: 15,
        bottom: 15,
      ),
      child: TextField(
        controller: controller,
        style: style,
        keyboardType: TextInputType.multiline,
        maxLines: null,
        onChanged: onChanged,
      ),
    );
  }
}

解决方案 #

核心问题分析 #

1. NoteTextField的build方法中每次直接赋值controller.text = displayText，组件重建时强制覆盖输入框内容并重置光标位置；
2. context.read<Data>().selectedNote不监听状态变化，但notifyListeners()触发后父组件仍会重建，导致子组件跟随重建。

修复步骤及代码 #

1. 修改NoteTextField组件，仅在文本变化时更新并保留光标位置

import 'dart:math' as math;

class NoteTextField extends StatelessWidget {
  const NoteTextField(
      {super.key,
      required this.displayText,
      required this.controller,
      required this.onChanged,
      required this.minLines,
      this.style});

  final String displayText;
  final TextEditingController controller;
  final Function(String) onChanged;
  final int minLines;
  final TextStyle? style;

  @override
  Widget build(BuildContext context) {
    // 仅当文本实际变化时才更新，避免每次build重置内容和光标
    if (controller.text != displayText) {
      // 保存当前光标位置
      final currentSelection = controller.selection;
      controller.text = displayText;
      // 恢复光标位置，防止光标超出文本长度
      controller.selection = currentSelection.copyWith(
        baseOffset: math.min(currentSelection.baseOffset, displayText.length),
        extentOffset: math.min(currentSelection.extentOffset, displayText.length),
      );
    }
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15),
      child: TextField(
        controller: controller,
        style: style,
        keyboardType: TextInputType.multiline,
        maxLines: null,
        onChanged: onChanged,
      ),
    );
  }
}

2. 修改展示页面状态类，监听选中笔记变化并初始化输入框内容

class _NoteDetailState extends State<NoteDetail> {
  final TextEditingController noteTitleController = TextEditingController();
  final TextEditingController noteContentController = TextEditingController();
  Note? _previousSelectedNote;

  @override
  void dispose() {
    noteContentController.dispose();
    noteTitleController.dispose();
    super.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final selectedNote = context.watch<Data>().selectedNote;
    // 仅当选中笔记切换时，才初始化输入框内容
    if (_previousSelectedNote != selectedNote) {
      noteTitleController.text = selectedNote.title;
      noteContentController.text = selectedNote.content;
      _previousSelectedNote = selectedNote;
    }
  }

  @override
  Widget build(BuildContext context) {
    // 通过watch监听选中笔记变化，触发didChangeDependencies更新
    final selectedNote = context.watch<Data>().selectedNote;
    
    return DefaultTabController(
      // ...省略其他代码...
      body: TabBarView(
        children: [
          Container(
            margin: const EdgeInsets.all(18),
            child: ListView(
              children: [
                NoteTextField(
                  displayText: selectedNote.title,
                  controller: noteTitleController,
                  onChanged: (value) {
                    context.read<Data>().update(title: value);
                  },
                  minLines: 1,
                  style: Theme.of(context).textTheme.titleLarge!,
                ),
                NoteTextField(
                  displayText: selectedNote.content,
                  controller: noteContentController,
                  onChanged: (value) {
                    context.read<Data>().update(content: value);
                  },
                  minLines: 10,
                ),
        // ...省略更多代码...

额外优化建议 #

• 将Note类改为不可变类（字段设为final，更新时创建新实例），让状态变化更清晰，便于Provider管理；
• 若无需实时同步输入状态到其他组件，可改为在输入框失去焦点时再调用update方法，减少组件重建次数。

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