1. Flutter 中的路由
- 在 Flutter 中通过 Navigator 组件管理路由导航。 并提供了管理堆栈的方法。如:Navigator.push 和 Navigator.pop
- Flutter 中给我们提供了两种配置路由跳转的方式:1、基本路由 2、命名路由
2. Flutter 中的基本路由使用
- 比如我们现在想从 HomePage 组件跳转到 SearchPage 组件。
- 1、需要在 HomePage 中引入 SearchPage.dart:
import'../SearchPage.dart';
RaisedButton(
child:Text("跳转页面"),
onPressed:(){
Navigator.of(context).push(
MaterialPageRoute(
builder:(BuildContextcontext){
returnSearchPage();
}
)
);
},
color:Theme.of(context).accentColor,
textTheme:ButtonTextTheme.primary
)
3. Flutter 中的基本路由跳转传值
- 比如我们现在想从 HomePage 组件跳转到 SearchPage 组件传值。
- 1、需要在 HomePage 中引入 SearchPage.dart:
import'../SearchPage.dart';
RaisedButton(
child:Text("跳转页面"), onPressed:(){
Navigator.of(context).push(
MaterialPageRoute(
builder:(BuildContextcontext){
returnSearchPage(title:"表单");
}
)
);
},
color:Theme.of(context).accentColor,
textTheme:ButtonTextTheme.primary
)
4. Flutter 中的命名路由
import'package:flutter/material.dart';
import'pages/Tabs.dart';
import'pages/Search.dart';
import'pages/Form.dart';
voidmain()=>runApp(MyApp());
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnMaterialApp(
initialRoute:'/',
routes:{
'/':(contxt)=>Tabs(),
'/search':(contxt)=>SearchPage(),
'/form':(context)=>FormPage(),
},
);
}
}
RaisedButton(
child:Text("跳转页面"),
onPressed:(){
Navigator.pushNamed(context,'/search');
},
color:Theme.of(context).accentColor,
textTheme:ButtonTextTheme.primary
)
5. Flutter 中的命名路由跳转传值
import'package:flutter/material.dart';
import'pages/Tabs.dart';
import'pages/Search.dart';
import'pages/Form.dart';
voidmain()=>runApp(MyApp());
classMyAppextendsStatelessWidget{
finalroutes={
'/':(contxt)=>Tabs(),
'/search':(contxt)=>SearchPage(),
'/form':(context,{arguments})=>FormPage(arguments:arguments),
};
@override
Widgetbuild(BuildContextcontext){
returnMaterialApp(
home:Tabs(),
onGenerateRoute:(RouteSettingssettings){
finalStringname=settings.name;
finalFunctionpageContentBuilder=this.routes[name];
if(pageContentBuilder!=null){
if(settings.arguments!=null){
finalRouteroute=MaterialPageRoute(
builder:(context)=>pageContentBuilder(context,
arguments:settings.arguments));
returnroute;
}else{
finalRouteroute=MaterialPageRoute(
builder:(context)=>pageContentBuilder(context));
returnroute;
}
}
});
}
}
RaisedButton(
child:Text("跳转到表单演示页面"),
onPressed:(){
Navigator.pushNamed(context,'/form',arguments:{
"id":20
});
},
color:Theme.of(context).accentColor,
textTheme:ButtonTextTheme.primary
)
import'package:flutter/material.dart';
classFormPageextendsStatelessWidget{
finalMaparguments;
FormPage({this.arguments});
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
appBar:AppBar(
title:Text("搜索"),
),
body:Text("我是一个表单页面 ${arguments!=null?arguments['id']:'0'}")
);
}
}
6. Flutter 中的命名路单独抽离到一 个文件
import'package:flutter/material.dart';
import'../pages/Tabs.dart';
import'../pages/Search.dart';
import'../pages/Form.dart';
finalMap<String,Function>routes={
'/':(contxt,{arguments})=>Tabs(),
'/search':(contxt,{arguments})=>SearchPage(arguments:arguments),
'/form':(context,{arguments})=>FormPage(arguments:arguments),
};
varonGenerateRoute=(RouteSettingssettings){
finalStringname=settings.name;
finalFunctionpageContentBuilder=routes[name];
if(pageContentBuilder!=null){
finalRouteroute=MaterialPageRoute(
builder:(context)=>
pageContentBuilder(context,arguments:settings.arguments));
returnroute;
}
};
import'package:flutter/material.dart';
import'routes/Routes.dart';
voidmain()=>runApp(MyApp());
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnMaterialApp(
initialRoute:'/',
onGenerateRoute:onGenerateRoute
);
}
}