我正在尝试使用新的Material You API实现一个导航栏。
https://api.flutter.dev/flutter/material/NavigationBar-class.html
我只是好奇地想知道我们是否可以使用Go_Router包实现相同的功能。
我正在尝试使用新的Material You API实现一个导航栏。
https://api.flutter.dev/flutter/material/NavigationBar-class.html
我只是好奇地想知道我们是否可以使用Go_Router包实现相同的功能。
2条答案
按热度按时间a8jjtwal1#
更新答案(v6.0.0)
我最初的答案是使用GoRouter v3创建的,当时不可能将导航栏保留在子屏幕中。
目前,在版本6中,GoRouter允许使用
ShellRoute
,您可以使用builder属性构建带有导航栏的Scaffold。您可以看到the oficial live example here。
我正在使用GoRouter v6.0.0重写下面过时的答案,我将保留原来的答案,以防有人发现它有用。
更新代码
1.我们需要创建一些基本模型来存储数据:
1.现在我们将创建呈现模型数据的基本视图:
1.现在,让我们最后创建一个小部件,它将显示
NavigationBar
:1.最后,只有在使用
StackRouter
定义应用的路线并将GoRouter
设置为应用的导航器时,这才有效:解决我们需求的重要部分是
ShellRouter
,它是一个用于显示任何匹配子路由的路由,而不是将它们放在根Navigator中。匹配到的子路径构建的widget成为构建器的子参数,
ShellScreen
可以渲染子路径widget呈现导航条。通过所有这些步骤,您将得到:
过期答案(v3.0.0)
是的,这是可能的[事实上,这是不可能的,但我当时不明白这个问题]。
让我们使用GoRouter文档中的示例作为起点。
1.我们需要创建一些基本模型来存储数据:
1.现在我们将创建呈现模型数据的基本视图:
1.到目前为止,我们所做的与
GoRouter
文档相比没有什么不同,所以让我们最后创建一个小部件来显示NavigationBar
:这是上面代码的重要部分:
因此,基本上我们使用的
NavigationBar
与使用TabBarView
几乎完全相同。1.最后,只有当我们定义应用的路线并将
GoRouter
设置为应用的导航器时,这才能起作用:通过所有这些步骤,您将得到:
wxclj1h52#
对于任何在所有页面上持久的BottomNavBar上搜索的人来说,这在Github上正在积极讨论,
https://github.com/flutter/packages/pull/2453