一、Flutter 中的路由
Flutter 中的路由通俗的讲就是页面跳转。
在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法。
如:Navigator.push 和 Navigator.pop
二、基本路由
需求:HomePage 组件跳转到 SearchPage 组件
- 在 HomPage 中引入 SearchPage.dart
import '../SearchPage.dart';
- 在 HomePage 中通过下面方法跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: () {
// 路由跳转
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SearchPage()
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
三、基本路由跳转传值
需求:从 HomePage 组件跳转到 SearchPage 组件传值
- 在 HomPage 中引入 SearchPage.dart
import '../SearchPage.dart';
- 在 HomePage 中通过下面方法跳转和传值
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: ()
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
SearchPage(title: "表单") // 传值
}
)
);
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
四、命名路由
- 配置路由
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home:Tabs(),
initialRoute: '/',
routes: {
'/': (context) => Tabs(),
'/search': (context) => SearchPage(),
'/form': (context) => FormPage()
}
);
}
}
- 路由跳转
RaisedButton(
child: Text("跳转到搜索页面"),
onPressed: (){
Navigator.pushNamed(context, '/search');
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
五、命名路由跳转传值
官方文档:https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments
1、配置路由
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
import 'pages/Search.dart';
import 'pages/Form.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final routes = {
'/': (context) => Tabs(),
'/search': (context) => SearchPage(),
'/form': (context, {arguments}) => FormPage(arguments: arguments),
};
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
onGenerateRoute: (RouteSettings settings) {
// 统一处理
final String name = settings.name;
final Function pageContentBuilder = this.routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context,
arguments: settings.arguments));
return route;
} else {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context));
return route;
}
}
});
}
}
- 跳转传值
RaisedButton(
child: Text("跳转到表单演示页面"),
onPressed: () {
Navigator.pushNamed(context, '/form', arguments: {
"id":20
});
},
color: Theme.of(context).accentColor,
textTheme: ButtonTextTheme.primary
)
- 接收参数
import 'package:flutter/material.dart'
class FormPage extends StatelessWidget {
final Map arguments;
FormPage({ this.arguments });
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("搜索")
),
body:Text("我是一个表单页面 ${ arguments != null ? arguments['id'] : '0' }")
);
}
}
六、命名路单独抽离到一个文件
// Routes.dart
import 'package:flutter/material.dart';
import '../pages/Tabs.dart';
import '../pages/Search.dart';
import '../pages/Form.dart';
final Map<String, Function> routes = {
'/':(contxt, {arguments}) => Tabs(),
'/search':(contxt, {arguments}) => SearchPage(arguments: arguments),
'/form': (context,{arguments}) => FormPage(arguments: arguments)
};
var onGenerateRoute = (RouteSettings settings) { // 统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context,
arguments: settings.arguments));
return route;
}
};
// main.dart
import 'package:flutter/material.dart';
import 'routes/Routes.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// home: Tabs(),
initialRoute: '/',
onGenerateRoute: onGenerateRoute
);
}
}