18Flutter中的路由、路由替换、返回到根路由:
路由:
正常跳转: Navigator.pushNamed(context,'/product');
路由替换:
Navigator.pushReplacementNamed(context, '/productinfo',
arguments: {"pid":778899}
);
返回上一页:
Navigator.of(context).pop();
//返回根路由:
Navigator.of(context).pushAndRemoveUntil(
new MaterialPageRoute(builder: (context)=>new Tabs(index: 1)),
(route)=>route==null
);
测试代码:
Home.dart
import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { const HomePage({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('跳转到搜索页面'), onPressed: (){ Navigator.pushNamed(context,'/search',arguments: { "id":123 }); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary ), RaisedButton( child: Text('跳转到商品页面'), onPressed: (){ Navigator.pushNamed(context,'/product'); } ) ], ); } }
Product.dart
import 'package:flutter/material.dart'; class ProductPage extends StatefulWidget { ProductPage({Key key}) : super(key: key); _ProductPageState createState() => _ProductPageState(); } class _ProductPageState extends State<ProductPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品页面'), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('跳转到商品详情页面'), onPressed: () { // Navigator.pushReplacementNamed(context, '/productinfo', // arguments: {"pid":778899} // ); Navigator.pushNamed(context, '/productinfo', arguments: {"pid":778899} ); }, color: Theme.of(context).accentColor, textTheme: ButtonTextTheme.primary), ], ) ); } }
ProductInfo.dart
import 'package:flutter/material.dart'; import '../pages/Tabs.dart'; class ProductInfoPage extends StatefulWidget { Map arguments; ProductInfoPage({Key key, this.arguments}) : super(key: key); _ProductInfoPageState createState() => _ProductInfoPageState(arguments: this.arguments); } class _ProductInfoPageState extends State<ProductInfoPage> { Map arguments; _ProductInfoPageState({this.arguments}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品详情页面'), ), // body: Text("这是一个商品详情页面pid=${arguments["pid"]}") body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('完成'), onPressed: () { // Navigator.of(context).pop(); //返回根: Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context)=>new Tabs(index: 1)), (route)=>route==null ); } ), ], ), ); } }
Tabs.dart
import 'package:flutter/material.dart'; import 'tabs/Home.dart'; import 'tabs/Category.dart'; import 'tabs/Setting.dart'; class Tabs extends StatefulWidget { final index; Tabs({Key key,this.index=0}) : super(key: key); _TabsState createState() => _TabsState(this.index); } class _TabsState extends State<Tabs> { int _currentIndex = 0; _TabsState(index){ this._currentIndex=index; } List _pageList=[ HomePage(), CategoryPage(), SettingPage() ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), bottomNavigationBar: BottomNavigationBar( currentIndex: this._currentIndex, onTap: (int index) { // print(index); setState(() { this._currentIndex = index; }); }, iconSize: 36.0, type: BottomNavigationBarType.fixed, fixedColor: Colors.red, items: [ BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')), BottomNavigationBarItem( icon: Icon(Icons.category), title: Text('分类')), BottomNavigationBarItem( icon: Icon(Icons.settings), title: Text('设置')), ]), body: this._pageList[this._currentIndex], ); } }
main.dart
import 'package:flutter/material.dart'; import 'package:flutter_demo/pages/Search.dart'; import 'routes/Routes.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( initialRoute: '/', onGenerateRoute: onGenerateRoute ); } }