为何NotesListView单独文件不重建，嵌入主文件可正常更新？

问题场景 #

使用gsheets包异步读写Google表格，点击首页AppBar的「New Note」按钮后，成功向表格添加一行数据，但单独文件中的NotesListView组件未重建更新；若将该组件改为main.dart中的无状态函数，则UI能正常更新。

核心代码片段 #

HomePage代码（main.dart）

// import statements

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool viewNotebooks = false;
  bool viewList = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leadingWidth: 650,
        leading: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            // 无关代码省略
            TextButton.icon(
                icon: const Icon(Icons.note_add_outlined),
                label: const Text("New Note"),
                onPressed: () async {
                  await Data.addNote(
                      title: 'New Note', content: '[content goes here]');
                  setState(() {});
                }),
            // 无关代码省略
          ],
        ),
      ),
      body: Row(
        children: [
          // 无关代码省略
          viewList
              ? const Expanded(
                  flex: 1,
                  child: NotesListView(),
                )
              : Container(),
          // 无关代码省略
        ],
      ),
    );
  }
}

单独文件的NotesListView组件

import 'package:flutter/material.dart';
import '../providers/sheets_api.dart';

class NotesListView extends StatefulWidget {
  const NotesListView({super.key});

  @override
  State<NotesListView> createState() => _NotesListViewState();
}

class _NotesListViewState extends State<NotesListView> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Data.getRows(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(
           child: CircularProgressIndicator(),
         );
        }
        if (snapshot.hasData) {
          return ListView.builder(
            shrinkWrap: true,
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              return ListTile(
                  title: Text(snapshot.data![index][1]),
                  subtitle: Text(snapshot.data![index][2]),
                  onTap: () async {
                    var id = snapshot.data![index][0];
                    // print(await Data.getNoteById(id));
                  });
            },
          );
       } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}

改为main.dart中的函数Widget（可正常更新）

Widget notesListView() {
  return FutureBuilder(
    // 其余代码与上述StatefulWidget中的FutureBuilder一致
  );
}

底层原因分析 #

1. StatefulWidget的实例复用机制 #

Flutter框架在对比新旧Widget树时，会根据Widget实例的同一性决定是否复用对应的State对象：

• 你在HomePage中使用了const NotesListView()，这意味着该Widget实例是编译期常量，每次HomePage重建时，这个位置的Widget实例完全相同。
• 框架认为没有必要重建这个StatefulWidget的State，因此_NotesListViewState的build方法不会被重新调用，FutureBuilder的future: Data.getRows()也不会再次执行，自然无法获取新添加的数据。

2. 函数Widget的重建逻辑 #

当把组件改为无状态函数notesListView()时：

• 每次HomePage调用setState()重建时，该函数会被重新执行，返回一个全新的FutureBuilder实例。
• 框架会识别到这个位置的Widget发生了变化，因此会重新执行FutureBuilder的future，获取最新的表格数据，UI随之更新。

解决方案（无需状态管理） #

方案1：移除const修饰符 #

将HomePage中NotesListView的const去掉，改为创建新的实例：

viewList
    ? Expanded(
        flex: 1,
        child: NotesListView(), // 去掉const
      )
    : Container(),

这样每次HomePage重建时，都会生成新的NotesListView实例，框架会重建其State并重新执行FutureBuilder的future，获取新数据。

方案2：添加触发更新的标识参数 #

给NotesListView添加一个用于触发更新的参数（比如版本号），当添加数据后更新该参数：

// 修改NotesListView
class NotesListView extends StatefulWidget {
  final int updateKey; // 添加触发更新的参数
  const NotesListView({super.key, required this.updateKey});

  @override
  State<NotesListView> createState() => _NotesListViewState();
}

// HomePage中维护一个版本号
class _HomePageState extends State<HomePage> {
  bool viewNotebooks = false;
  bool viewList = true;
  int _updateCount = 0; // 用于触发更新的计数器

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Row(
          children: [
            TextButton.icon(
              onPressed: () async {
                await Data.addNote(title: 'New Note', content: '[content goes here]');
                setState(() {
                  _updateCount++; // 更新计数器
                });
              },
              // ...其余代码
            ),
          ],
        ),
      ),
      body: Row(
        children: [
          viewList
              ? Expanded(
                  flex: 1,
                  child: NotesListView(updateKey: _updateCount), // 传递参数
                )
              : Container(),
        ],
      ),
    );
  }
}

当updateKey变化时，框架会认为NotesListView实例发生了变化，从而重建其State，重新获取数据。

方案3：在State中主动监听数据变化 #

在_NotesListViewState中，通过initState初始化数据，在didUpdateWidget中重新获取数据：

class _NotesListViewState extends State<NotesListView> {
  late Future<List<List<dynamic>>> _future;

  @override
  void initState() {
    super.initState();
    _future = Data.getRows();
  }

  @override
  void didUpdateWidget(covariant NotesListView oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 当Widget更新时，重新获取数据
    _future = Data.getRows();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _future, // 使用成员变量的future
      // ...其余builder代码
    );
  }
}

配合方案1或方案2，当Widget更新时，didUpdateWidget会被调用，重新触发数据获取。

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