Flutter 将Navigator与底部导航栏一起使用
使用bottomNavigationBar时,设置Flutter 将Navigator与底部导航栏一起使用,flutter,Flutter,使用bottomNavigationBar时,设置导航架构命名路由的正确方法是什么 这是我目前的设置,但我觉得有更好的方法: main.dart: onGenerateRoute:(设置){ 返回物料路线( 设置:设置, 生成器:(上下文){ 开关(设置.名称){ 案例名称Drootes.splashScreen: 返回屏幕(); 案例名称。登录名: 返回登录页面(); 案例名称Drootes.mainApp: 返回导航器设置(); 违约: 抛出异常('无效路由:${settings.name}
导航
架构命名路由的正确方法是什么
这是我目前的设置,但我觉得有更好的方法:
main.dart:
onGenerateRoute:(设置){
返回物料路线(
设置:设置,
生成器:(上下文){
开关(设置.名称){
案例名称Drootes.splashScreen:
返回屏幕();
案例名称。登录名:
返回登录页面();
案例名称Drootes.mainApp:
返回导航器设置();
违约:
抛出异常('无效路由:${settings.name}');
}
});
导航器设置。省道:
IndexedStack(
index:Provider.of(context).selectedViewIndex,
子项:[FirstMain()、SecondMain()、ThirdMain()、FourthMain()],
),底部导航栏。。。
在每个主文件中都有以下设置
class FirstMain扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回导航器(
key:Provider.of(context).homeKey,
onGenerateRoute:(设置){
返回物料路线(
设置:设置,
生成器:(上下文){
开关(设置.名称){
案例“/”:
案例名称Drootes.main页面:
返回主页();
案例名称Drootes.singleMainPage:
返回SingleMainPage();
违约:
抛出异常('无效路由:${settings.name}');
}
},
);
},
);
}
}
然后,我的路由提供程序如下所示:
class RouteProvider扩展了ChangeNotifier{
int _selectedViewIndex=0;
获取selectedViewIndex=>\u selectedViewIndex;
设置selectedViewIndex(int newIndex){
_selectedViewIndex=newIndex;
notifyListeners();
}
GlobalKey _mainKey=GlobalKey();
GlobalKey _homeKey=GlobalKey();
GlobalKey _secondKey=GlobalKey();
GlobalKey _thirdKey=GlobalKey();
GlobalKey _fourthKey=GlobalKey();
获取mainKey=>\u mainKey;
获取homeKey=>\u homeKey;
获取secondKey=>\u secondKey;
获取thirdKey=>\u thirdKey;
获取fourthKey=>\u fourthKey;
}
当前在indexedStack的另一页上更改路由的方式
final routeProvider routeProvider=Provider.of(上下文,listen:false);
最终GlobalKey-thirdKey=RouteProvider.thirdKey;
RouteProvider.selectedViewIndex=2;
Navigator.pushReplacementNamed(thirdKey.currentContext,namedRootes.third);
更好的导航方式
创建路由生成器
import 'package:flutter/material.dart';
import 'package:routing_prep/main.dart';
class RouteGenerator {
static Route<dynamic> generateRoute(RouteSettings settings) {
// Getting arguments passed in while calling Navigator.pushNamed
final args = settings.arguments;
switch (settings.name) {
case '/':
return MaterialPageRoute(builder: (_) => FirstPage());
case SecondPage.routeName:
// Validation of correct data type
if (args is String) {
return MaterialPageRoute(
builder: (_) => SecondPage(
data: args,
),
);
}
// If args is not of the correct type, return an error page.
// You can also throw an exception while in development.
return _errorRoute();
default:
// If there is no such named route in the switch statement, e.g. /third
return _errorRoute();
}
}
static Route<dynamic> _errorRoute() {
return MaterialPageRoute(builder: (_) {
return Scaffold(
appBar: AppBar(
title: Text('Error'),
),
body: Center(
child: Text('ERROR'),
),
);
});
}
}
导入“包装:颤振/材料.省道”;
导入“包:路由_prep/main.dart”;
类路由生成器{
静态路由生成器输出(路由设置){
//调用Navigator.pushNamed时获取传入的参数
最终参数=settings.arguments;
开关(设置.名称){
案例“/”:
返回MaterialPageRoute(生成器:()=>FirstPage());
案例SecondPage.routeName:
//验证正确的数据类型
if(args是字符串){
返回物料路线(
生成器:()=>第二页(
数据:args,
),
);
}
//如果args的类型不正确,请返回错误页。
//您还可以在开发过程中抛出异常。
返回_errorRoute();
违约:
//如果switch语句中没有这样的命名路由,例如/third
返回_errorRoute();
}
}
静态路由_errorRoute(){
返回物料管理路线(生成器:(){
返回脚手架(
appBar:appBar(
标题:文本(“错误”),
),
正文:中(
子项:文本('ERROR'),
),
);
});
}
}
正如您所看到的,您已经从在代码库中到处都有路由逻辑位转移到了RouteGenerator中这个逻辑的单一位置。现在,您的小部件中唯一保留的导航代码将是使用导航器推送命名路由的代码
在运行和测试应用程序之前,还需要进行一些设置,才能使RouteGenerator正常工作
main.dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
...
// Initially display FirstPage
initialRoute: '/',
onGenerateRoute: RouteGenerator.generateRoute,
);
}
}
class FirstPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
...
RaisedButton(
child: Text('Go to second'),
onPressed: () {
// Pushing a named route
Navigator.of(context).pushNamed(
SecondPage.routeName,
arguments: 'Hello there from the first page!',
);
},
)
...
}
}
class SecondPage extends StatelessWidget {
static const routeName = "/second";
// This is a String for the sake of an example.
// You can use any type you want.
final String data;
SecondPage({
Key key,
@required this.data,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Routing App'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Second Page',
style: TextStyle(fontSize: 50),
),
Text(
data,
style: TextStyle(fontSize: 20),
),
],
),
),
);
}
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
...
//最初显示第一页
initialRoute:“/”,
onGenerateRoute:RouteGenerator.generateRoute,
);
}
}
类FirstPage扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回脚手架(
...
升起的按钮(
子项:文本(“转到第二个”),
已按下:(){
//推送命名路由
Navigator.of(context.pushNamed)(
SecondPage.routeName,
论点:“你好,从第一页开始!”,
);
},
)
...
}
}
类SecondPage扩展了无状态小部件{
静态常量routeName=“/second”;
//为了举例说明,这是一个字符串。
//你可以使用任何你想要的类型。
最终字符串数据;
第二页({
关键点,
@需要这个数据,
}):super(key:key);
@凌驾
小部件构建(构建上下文){
返回脚手架(
appBar:appBar(
标题:文本(“路由应用程序”),
),
正文:中(
子:列(
mainAxisSize:mainAxisSize.min,
儿童:[
正文(
“第二页”,
样式:TextStyle(字体大小:50),