(Flutter GoRouter) 构建像网页浏览器一样的选项卡系统导航

问题描述 投票:0回答:1

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

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

https://youtu.be/ShYSMZ7uxJw

图片:

home view

list view

您可以在这里找到代码:https://github.com/dleurs/web_tab_nav

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

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

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

flutter flutter-navigation flutter-go-router flutter-beamer
1个回答
0
投票

您确定 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

© www.soinside.com 2019 - 2024. All rights reserved.