demo
1import 'package:flutter/material.dart'; 2 3void main() => runApp(new MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 home: MyHomePage(), 10 ); 11 } 12} 13 14class MyHomePage extends StatefulWidget { 15 @override 16 _MyHomePageState createState() => _MyHomePageState(); 17} 18 19class _MyHomePageState extends State<MyHomePage> { 20 @override 21 Widget build(BuildContext context) { 22 return Scaffold( 23 body: Center( 24 child: RaisedButton( 25 child: Text('跳转到 screen2'), 26 onPressed: () { 27 Navigator.of(context).push(MaterialPageRoute( 28 builder: (context) => Screen2(), 29 )); 30 }, 31 ), 32 )); 33 } 34} 35 36class Screen2 extends StatelessWidget { 37 @override 38 Widget build(BuildContext context) { 39 return Scaffold( 40 body: Center( 41 child: RaisedButton( 42 child: Text('back'), 43 onPressed: () { 44 Navigator.of(context).pop(null); 45 }, 46 ), 47 ), 48 ); 49 } 50}
配置 routes 跳转
1import 'package:flutter/material.dart'; 2 3void main() => runApp(new MyApp()); 4 5class MyApp extends StatelessWidget { 6 @override 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 title: 'Ajnauw', 10 theme: ThemeData( 11 primarySwatch: Colors.blue, 12 ), 13 home: MyHomePage(), 14 routes: <String, WidgetBuilder>{ 15 '/a': (BuildContext context) => MyPage(title: 'page A'), 16 '/b': (BuildContext context) => MyPage(title: 'page B'), 17 '/c': (BuildContext context) => MyPage(title: 'page C'), 18 }, 19 ); 20 } 21} 22 23class MyHomePage extends StatefulWidget { 24 MyHomePage({Key key}) : super(key: key); 25 26 @override 27 _MyHomePageState createState() => _MyHomePageState(); 28} 29 30class _MyHomePageState extends State<MyHomePage> { 31 final List<String> _pages = <String>['/a', '/b', '/c']; 32 String togoPage = '/b'; 33 34 _handleRadioValueChange(String nv) { 35 setState(() { 36 togoPage = nv; 37 }); 38 } 39 40 // 返回一个小widget 41 Widget _generagorRadio(String pageName) { 42 return GestureDetector( 43 onTap: () { 44 _handleRadioValueChange(pageName); 45 }, 46 child: Container( 47 decoration: BoxDecoration( 48 color: Colors.grey[200], 49 ), 50 margin: EdgeInsets.only(top: 8.0), 51 child: Row( 52 children: <Widget>[ 53 Radio( 54 value: pageName, 55 onChanged: _handleRadioValueChange, 56 groupValue: togoPage, 57 ), 58 Text(pageName), 59 ], 60 ), 61 ), 62 ); 63 } 64 65 @override 66 Widget build(BuildContext context) { 67 return Scaffold( 68 appBar: AppBar( 69 title: Text('demo'), 70 ), 71 body: ListView( 72 children: <Widget>[ 73 Container( 74 margin: EdgeInsets.only(left: 8.0, right: 8.0), 75 child: Column( 76 children: _pages 77 .map((String pageName) => _generagorRadio(pageName)) 78 .toList(), 79 ), 80 ), 81 Container( 82 margin: EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0), 83 child: RaisedButton( 84 onPressed: () { 85 // 点击触发事件，页面入栈 86 Navigator.pushNamed(context, togoPage); 87 }, 88 color: Theme.of(context).primaryColor, 89 child: Text('跳转新页面 $togoPage'), 90 ), 91 ), 92 ], 93 ), 94 ); 95 } 96} 97 98class MyPage extends StatelessWidget { 99 final String title; 100 101 MyPage({Key key, this.title}) : super(key: key); 102 103 @override 104 Widget build(BuildContext context) { 105 return Scaffold( 106 appBar: AppBar( 107 title: Text(title), 108 ), 109 body: Center( 110 child: Text(title), 111 ), 112 ); 113 } 114}
动画页面路劲转换
-
1 Navigator.of(context).push( 2 PageRouteBuilder( 3 transitionDuration: Duration(milliseconds: 500), 4 pageBuilder: (context, animation, secondaryAnimation) => 5 Screen2(), 6 transitionsBuilder: 7 (context, animation, secondaryAnimation, child) { 8 var begin = Offset(0.0, 1.0); 9 var end = Offset.zero; 10 var curve = Curves.ease; 11 12 var tween = Tween(begin: begin, end: end); 13 var curvedAnimation = CurvedAnimation( 14 parent: animation, 15 curve: curve, 16 ); 17 return SlideTransition( 18 position: tween.animate(curvedAnimation), 19 child: child, 20 ); 21 }, 22 ), 23 );
pushReplacement
通过推送给定路线替换导航器的当前路线，然后在新路线完成动画输入后处置前一路线
1Navigator.of(context).pushReplacement( 2 MaterialPageRoute(builder: (context) => HomePage()) 3)
设置404页面
1 MaterialApp( 2 navigatorObservers: [routeObserver], 3 home: HomePage(), 4 title: 'home', 5 onUnknownRoute: (RouteSettings settings) { 6 return MaterialPageRoute( 7 builder: (context) => Title( 8 title: '页面未找到', 9 color: Theme.of(context).primaryColor, 10 child: Scaffold( 11 appBar: AppBar(), 12 body: Center(child: Text('404')), 13 ), 14 ), 15 settings: RouteSettings( 16 name: 'not-found', 17 ), 18 ); 19 }, 20 );
设置不同的进场/出场动画
1Navigator.of(context).push( 2 PageRouteBuilder( 3 transitionDuration: Duration(milliseconds: 500), 4 pageBuilder: (context, animation, secondaryAnimation) => 5 Scaffold( 6 backgroundColor: Colors.red, 7 body: Center(child: Text('page 2')), 8 floatingActionButton: FloatingActionButton( 9 child: Icon(Icons.backspace), 10 onPressed: () => Navigator.of(context).pop(), 11 ), 12 ), 13 transitionsBuilder: ( 14 context, 15 Animation<double> animation, 16 Animation<double> secondaryAnimation, 17 child, 18 ) { 19 return SlideTransition( 20 position: Tween( 21 // 关键点 22 begin: animation.status == AnimationStatus.reverse 23 ? const Offset(-1.0, -1.0) 24 : const Offset(1.0, 1.0), 25 end: Offset.zero, 26 ).animate(animation), 27 child: child, 28 ); 29 }), 30);