像网络浏览器一样构建选项卡系统导航

Question

我想在Flutter中构建一个类似于Web浏览器的选项卡系统。在应用程序启动时，我们只能有一个主页选项卡，我们可以在其中打开新选项卡。然后可以删除这些选项卡，就像网络浏览器选项卡一样。

我当前工作的视频将比文字更好地解释它：

图片：

但是，此代码维护起来有点棘手，因为在 MaterialApp.Router._routers 中定义了所有可能的路线 => 小部件的导航列表，以及 TabBar 和 TabView 中当前可见小部件的列表（在 TabNavCubit/State 内），这不一样。

此外，使用此解决方案似乎不可能创建同一路线的两个选项卡/两个实例。我们将遇到一个关键问题，选项卡将有一个共享实例（在第一个选项卡“列表”上向下滚动，同时在第二个选项卡“列表”上向下滚动）。

您知道如何解决这些问题吗？我应该放弃 GoRouter 并尝试使用普通 Navigator 2.0 来做到这一点吗？或者另一个包裹？

Answer 1

您确定 Router 和 Navigator（无论软件包如何）能够满足您的需求吗？即，您是否需要深度链接的好处，您是否想要一个人们可以输入网址并打开选项卡的版本？

此外，我知道可能有几乎无限数量的选项卡（如网络浏览器），所以对我来说，命名路由似乎不适合。

你可以看看状态管理。不确定 BloC 中的同等概念，但 Riverpod 有 Family 概念。根据 ChatGPT，在 BloC 中，这只是在 Cubit 的构造函数中传递参数。

如果您为每个选项卡分配一个 id，则在 Riverpod 中您可以创建一个基于此 id 的 Provider.family，从而提供与选项卡相关的数据。 Tab 系统将是一个简单的“selectedTab”提供程序。

仅供参考，如果您不属于 BloC，请参阅 Riverpod 的 Family 概念： https://riverpod.dev/docs/concepts/modifiers/family