1、配置路由文件Routes.dart
import 'package:flutter/material.dart'; import '../pages/Tabs.dart'; import '../pages/Form.dart'; import '../pages/Search.dart';//配置路由 final routes={ '/':(context)=>Tabs(), '/form':(context)=>FormPage(),
'/search':(context,{arguments})=>SearchPage(arguments:arguments), }; //固定写法 var onGenerateRoute=(RouteSettings settings) { // 统一处理 final String name = settings.name; final Function pageContentBuilder = 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; } } };
然后在main.dart引入Routes.dart
import 'Routes.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 ); } }
路由传参初页面
import 'package:flutter/material.dart'; class HomePage extends StatefulWidget { HomePage({Key key}) : super(key: key); _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text("跳转到搜索页面"), onPressed: () { //路由跳转 Navigator.pushNamed(context, '/search',arguments: { "id":123 }); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary ), ], ); } }
接收参数页面
import 'package:flutter/material.dart'; class SearchPage extends StatelessWidget { //接收页面参数 final arguments; SearchPage({this.arguments}); @override Widget build(BuildContext context) { return Scaffold( appBar:AppBar( title: Text("搜索页面"), ) , body: Text("搜索页面内容区域${arguments != null ? arguments['id'] : '0'}"), ); } }