如何通过Key在Flutter两个页面复用Widget并共享状态？

我之前刚好处理过类似的Stream驱动列表跨页面状态复用的需求，给你梳理几个针对性的解决方案：

1. 用GlobalKey且避免页面同时挂载的方法 #

你遇到的GlobalKey冲突问题核心是两个页面的EntrySearch同时存在于Widget树中。可以通过动态控制旧页面中EntrySearch的显示状态来规避这个问题：

• 定义一个全局的GlobalKey<EntrySearchState>；
• 在推送新页面之前，先把旧页面里的EntrySearch隐藏（比如用布尔值控制渲染为SizedBox），确保它从Widget树中移除；
• 等待新页面推送完成后，返回时再重新显示旧页面的EntrySearch，此时它会复用之前的状态。

示例代码大概是这样：

// 全局Key，用来绑定EntrySearch的状态
final searchKey = GlobalKey<EntrySearchState>();

// 旧页面
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool _showSearchWidget = true;

  void _openDetailPage() async {
    // 先隐藏旧的EntrySearch，让它从Widget树中卸载
    setState(() => _showSearchWidget = false);
    // 推送新页面
    await Navigator.of(context).push(MaterialPageRoute(
      builder: (_) => DetailPage(searchKey: searchKey),
    ));
    // 返回后重新显示，恢复之前的状态
    setState(() => _showSearchWidget = true);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _showSearchWidget ? EntrySearch(key: searchKey) : const SizedBox(),
      floatingActionButton: FloatingActionButton(onPressed: _openDetailPage),
    );
  }
}

// 新页面
class DetailPage extends StatelessWidget {
  final GlobalKey<EntrySearchState> searchKey;

  const DetailPage({required this.searchKey});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          EntrySearch(key: searchKey),
          const Expanded(child: DetailPanel()),
        ],
      ),
    );
  }
}

这个方法完全依赖GlobalKey的状态复用能力，不需要额外的状态管理，也不会出现Key冲突。

2. 专门用于跨页面复用的特殊Key？ #

遗憾的是，Flutter并没有提供专门针对跨页面复用Widget的特殊Key。GlobalKey已经是最接近这个需求的工具了，但它的限制就是同一时间只能有一个Widget绑定该Key——这也是为什么我们需要上面的方法来控制Widget的挂载时机。

其他类型的Key（比如UniqueKey、ObjectKey）要么会强制Widget重建，要么只能在同一树内做状态区分，都不适合跨页面复用状态的场景。

3. 其他可行方案 #

如果上面的GlobalKey方案不符合你的预期，还有两个相对轻量的替代方案：

方案A：封装轻量的Stream状态管理器 #

虽然你提到不想用传统状态管理，但可以封装一个极简的状态管理器类来统一管理搜索Stream、缓存结果和加载状态，避免手动处理续接Stream的繁琐：

class SearchStateManager {
  final _resultController = StreamController<List<Item>>.broadcast();
  List<Item> _currentResults = [];
  String _currentQuery = '';
  bool _isLoading = false;

  Stream<List<Item>> get resultsStream => _resultController.stream;

  // 执行搜索
  Future<void> search(String query) async {
    if (_currentQuery == query || _isLoading) return;
    _currentQuery = query;
    _isLoading = true;
    final newResults = await fetchItems(query); // 你的异步查询方法
    _currentResults = newResults;
    _resultController.add(_currentResults);
    _isLoading = false;
  }

  // 加载更多
  Future<void> loadMore() async {
    if (_isLoading) return;
    _isLoading = true;
    final moreItems = await fetchMoreItems(_currentQuery, _currentResults.length);
    _currentResults.addAll(moreItems);
    _resultController.add(_currentResults);
    _isLoading = false;
  }

  void dispose() => _resultController.close();
}

然后你可以通过全局实例或者Provider把这个管理器注入到两个页面的EntrySearch中，让它们共用同一个Stream和状态。这种方式比手动维护缓存和Stream续接要简洁得多，也不容易出错。

方案B：使用PageStorage保存滚动位置+共享Stream #

如果主要关注滚动位置的保持，可以用PageStorageKey来保存ListView的滚动状态，同时让两个页面的EntrySearch监听同一个全局Stream实例。不过这个方案还是需要你手动处理Stream的缓存和续接，适合对状态管理侵入性要求极低的场景。

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