Flutter无Context实现Navigator页面导航：收藏页跳转问题

我来帮你搞定这个难题！你的核心困境是生成收藏列表的类没有BuildContext，但需要实现点击跳转，最优雅的解决方案是通过回调函数把导航逻辑和UI渲染逻辑解耦，让持有Context的FavouritesPage来处理导航操作，列表生成类只专注于构建UI组件。

具体实现步骤 #

1. 给列表生成方法添加回调参数 #

修改favoriteContainerLists方法，新增一个Function(int)类型的参数，用来接收点击收藏项时的回调（参数传递当前项的ID）：

List<Widget> favoriteContainerLists({required Function(int) onItemTap}) {
  DatabaseProvider.db.queryDb();
  List<Widget> localList = [];
  
  if (DatabaseProvider.publicFavoriteList == null || DatabaseProvider.publicFavoriteList.isEmpty) {
    // 空状态的UI代码保持不变
    localList.add(
      Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            "你的收藏将显示在此处！",
            style: TextStyle(
              fontFamily: "Hind",
              fontSize: 22,
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "在信息页面点击图片并使用 ",
                style: TextStyle(
                  color: Colors.indigo,
                  fontFamily: "Hind",
                  fontSize: 15,
                ),
              ),
              Icon(
                Icons.star_border,
                color: Colors.orange,
              ),
            ],
          ),
          Text(
            " 来添加收藏！",
            style: TextStyle(
              color: Colors.indigo,
              fontFamily: "Hind",
              fontSize: 15,
            ),
          ),
        ],
      ),
    );
  } else {
    localList.add(Padding(
      padding: const EdgeInsets.only(bottom: 15.0),
      child: Text(
        "你的收藏：",
        textAlign: TextAlign.left,
        style: TextStyle(
          fontSize: 30,
          color: Colors.indigoAccent,
          fontFamily: "Hind",
        ),
      ),
    ));
    
    for (var i = 0; i < DatabaseProvider.publicFavoriteList.length; i++) {
      DatabaseProvider.db.queryDb();
      int currentIdInt = DatabaseProvider.publicFavoriteList[i];
      localList.add(
        Padding(
          padding: const EdgeInsets.only(bottom: 15),
          child: MaterialButton(
            // 这里调用传入的回调，把当前项的ID传回去
            onPressed: () => onItemTap(currentIdInt),
            padding: const EdgeInsets.only(bottom: 0),
            child: Container(
              // 原容器UI代码保持不变
              width: double.infinity,
              height: 120,
              decoration: BoxDecoration(
                color: buttonColor,
                borderRadius: BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3),
                  ),
                ],
              ),
              child: Padding(
                padding: const EdgeInsets.fromLTRB(10, 8, 10, 8),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Center(
                      child: Container(
                        width: 70,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(8)),
                        ),
                        child: Image.asset(
                            AppBrain().contentList[currentIdInt].imageAdress),
                      ),
                    ),
                    VerticalDivider(
                      thickness: 2,
                      indent: 15,
                      endIndent: 15,
                    ),
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          Text(
                            AppBrain().contentList[currentIdInt].artName,
                            style: TextStyle(
                                fontFamily: "Hind",
                                fontSize: 23,
                                color: Colors.blueGrey),
                          ),
                          Expanded(
                            child: Container(
                              child: RichText(
                                maxLines: 2,
                                softWrap: true,
                                overflow: TextOverflow.ellipsis,
                                textAlign: TextAlign.left,
                                text: TextSpan(
                                  style: TextStyle(
                                      fontSize: 14,
                                      color: Colors.black,
                                      fontFamily: "Hind"),
                                  text: (contentList[currentIdInt].description),
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
    }
  }
  return localList;
}

2. 在FavouritesPage中传入导航回调 #

回到FavouritesPage的build方法，调用favoriteContainerLists时传入处理导航的逻辑——这里你可以直接使用页面的context了：

child: Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: AppBrain().favoriteContainerLists(
    onItemTap: (itemId) {
      // 在这里执行页面跳转，因为FavouritesPage持有合法的BuildContext
      Navigator.of(context).push(toInformationPage(itemId));
      // 提示：如果toInformationPage需要接收ID参数来加载对应内容，记得在这里传进去
    },
  ),
),

为什么这个方案更优？ #

• 遵循单一职责：列表生成类只负责构建UI，导航逻辑交给页面处理，避免了类持有Context可能导致的内存泄漏问题。
• 代码解耦灵活：以后如果要修改跳转逻辑（比如换成命名路由pushNamed），只需要改动FavouritesPage里的回调，不用碰列表生成的代码。
• 复用性更强：如果其他页面也需要用到这个列表组件，只需要传入不同的回调逻辑即可，不用重复造轮子。

备选方案（不推荐）：使用GlobalKey #

虽然可以通过GlobalKey<NavigatorState>全局获取导航上下文，但这种方式会增加代码耦合，还容易引发全局状态管理的混乱，所以更推荐上面的回调方案。

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