1.路由跳转到页面
思路:
设计三个按钮 然后三个点击事件 利用
Navigator.of(context).push( MaterialPageRoute(builder: (context)=>page));
进行跳转新页面
2.页面折回到路由
在跳转的页面加入监听 收拾监听 利用
leading:GestureDetector( onTap:(){ Navigator.pop(context); }, child: Icon(Icons.arrow_back), ) ,
进行折回
3.还有一种
AppBar中加入
actions: <Widget>[ new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), ]
进行跳转
完整代码
import 'package:english_words/english_words.dart'; import 'package:flutter/material.dart'; import 'package:flutter_color_plugin/flutter_color_plugin.dart'; import 'package:fluter/flutter-01-statelessWidgets.dart'; import 'package:fluter/flutter-02-statefulWidgets.dart'; import 'package:fluter/flutter-03-layoutPage.dart'; import 'package:fluter/Demo4-更换组件.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title:"demo", theme: ThemeData( primarySwatch: Colors.amber, ), home: RouteNavigator() , routes: <String, WidgetBuilder>{ 'less':(BuildContext context) => MyWidgeTest(), 'ful':(BuildContext context) => MyStatefulWidgetApp(), 'layout':(BuildContext context) => MyLayoutWidgetApp(), }, ); } } class RouteNavigator extends StatefulWidget { @override _RouteNavigatorState createState() => new _RouteNavigatorState(); } class _RouteNavigatorState extends State<RouteNavigator> { final _saved = new Set<WordPair>(); bool byName =false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("路由"), actions: <Widget>[ new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), ] ), body: buildContainer(), ); } void _pushSaved() { var take = generateWordPairs().take(10); for (var o in take) { _saved.add(o); } Navigator.of(context).push( new MaterialPageRoute( builder: (context) { final tiles = _saved.map((pair) { return new ListTile( title: new Text( pair.asPascalCase, style: TextStyle(fontSize: 20), ), ); }, ); final divided = ListTile.divideTiles( context: context, tiles: tiles, ).toList(); return new Scaffold( appBar: new AppBar( title: new Text('Saved Suggestions'), ), body: new ListView( children: divided), ); }, ), ); } Container buildContainer() { return new Container( decoration: BoxDecoration(color: Colors.white), margin: EdgeInsets.only(top: 60), height: 300, width: 600, child: Column( children: <Widget>[SwitchListTile( title: Text("${byName?"":"不"} 通过路由名字跳转"), value: byName, onChanged: (value){ print(value); setState(() { byName=!byName; }); return value; }), _item("Flutter之statelessWidget的基础组件",MyWidgeTest(title: '基础组建'),"less"), _item("Flutter之statefulWidget的基础组件",MyStatefulWidget1(title: '有状态组件'),"ful"), _item("Flutter之布局的相关组件", MyStatefulWidget(title: '布局组建'),"layout"), _item("Flutter之更换组件",SampleAppPage(),"of"), ], ), ); } _item(String title, page, String rountName) { return Container( width: 300, child: RaisedButton( onPressed: (){ if(byName){ Navigator.of(context).push( MaterialPageRoute(builder: (context)=>page)); // Navigator.pushNamed(context, rountName); } }, child: Text(title)), ); } }
注意事项:
1.可以在MaterialApp 中加入 路由
然后用命令
Navigator.pushNamed(context, rountName);
进行跳转
2.跳转的页面 写有状态组件 要不返回的时候会黑屏