前文說明,最近一直在折騰flutter,期間踩了很多坑,因此就想總結下,方便本身查閱,但願也能幫助別人,裏面涉及到的一些知識點可能沒有說起。 包括我本身可能理解有誤的地方,歡迎指出。但願能一塊兒進步,成長。趁着有風趕快飛翔吧。markdown
1.方式一less
//如下省略無關代碼 import 'index.dart'; mian.dart //主路由 void main() { runApp(MaterialApp(index: IndexPage())); } index.dart import 'xxx1.dart'; import 'xxx2.dart'; class IndexPage extends StatefulWidget { @override IndexPageState createState() => IndexPageState(); } class IndexPageState extends State<IndexPage> { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ FlatButton( onPressed: () { builder = (BuildContext _) => Xxx1Page(); }, child: Text( "xxx1", ), ), FlatButton( onPressed: () { builder = (BuildContext _) => Xxx2Page(); }, child: Text( "xxx2", ), ) ], )); } } xxx1.dart class Xxx1Page extends StatelessWidget { } xxx2.dart class Xxx2Page extends StatelessWidget { } 複製代碼
2.方式二ide
//如下省略無關代碼 route.dart import 'index.dart'; import 'xxx1.dart'; import 'xxx2.dart'; final Map<String, WidgetBuilder> RoutePath = <String, WidgetBuilder>{ '/': (BuildContext context) => IndexPage(), //首頁路由 '/xxx1.dart': (BuildContext context) => Xxx1Page(), '/xxx2.dart': (BuildContext context) => Xxx2Page(), } mian.dart //主路由 import '/route/route.dart'; Widget build(BuildContext context) { return MaterialApp( initialRoute: '/', routes: RoutePath, ) } index.dart import 'xxx1.dart'; import 'xxx2.dart'; class IndexPage extends StatefulWidget { @override IndexPageState createState() => IndexPageState(); } class IndexPageState extends State<IndexPage> { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ FlatButton( onPressed: () { Navigator.of(context).pushNamed('/xxx1'); }, child: Text( "xxx1", ), ), FlatButton( onPressed: () { Navigator.of(context).pushNamed('/xxx2'); }, child: Text( "xxx2", ), ) ], )); } } xxx1.dart class Xxx1Page extends StatelessWidget { } xxx2.dart class Xxx2Page extends StatelessWidget { } 複製代碼
在上面頁面繼續改造ui
1.方式一this
//如下省略無關代碼 import 'index.dart'; mian.dart //主路由 void main() { runApp(MaterialApp(index: IndexPage())); } index.dart import 'xxx1.dart'; import 'xxx2.dart'; class IndexPage extends StatefulWidget { @override IndexPageState createState() => IndexPageState(); } class IndexPageState extends State<IndexPage> { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ FlatButton( onPressed: () { builder = (BuildContext _) => Xxx1Page(id:'xxx2'); }, child: Text( "xxx1", ), ), FlatButton( onPressed: () { builder = (BuildContext _) => Xxx2Page(); }, child: Text( "xxx2", ), ) ], )); } } xxx1.dart class Xxx1Page extends extends StatefulWidget { Xxx1Page({this.id, Key key}) : super(key: key); String id; } xxx2.dart class Xxx2Page extends extends StatefulWidget { } 複製代碼
2.方式二spa
//如下省略無關代碼 route.dart import 'index.dart'; import 'xxx1.dart'; import 'xxx2.dart'; final Map<String, WidgetBuilder> RoutePath = <String, WidgetBuilder>{ '/': (BuildContext context) => IndexPage(), //首頁路由 '/xxx1.dart': (BuildContext context) => Xxx1Page(), '/xxx2.dart': (BuildContext context) => Xxx2Page( id:ModalRoute.of(context).settings.arguments ), } mian.dart //主路由 import '/route/route.dart'; Widget build(BuildContext context) { return MaterialApp( initialRoute: '/', routes: RoutePath, ) } index.dart import 'xxx1.dart'; import 'xxx2.dart'; class IndexPage extends StatefulWidget { @override IndexPageState createState() => IndexPageState(); } class IndexPageState extends State<IndexPage> { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ FlatButton( onPressed: () { Navigator.of(context).pushNamed('/xxx1', arguments: 'xxx1'); }, child: Text( "xxx1", ), ), FlatButton( onPressed: () { Navigator.of(context).pushNamed('/xxx2'); }, child: Text( "xxx2", ), ) ], )); } } xxx1.dart class Xxx1Page extends extends StatefulWidget { Xxx1Page({this.id, Key key}) : super(key: key); String id; } xxx2.dart class Xxx2Page extends extends StatefulWidget { } 複製代碼
這幾個也是比較經常使用的路由導航:pop、pushReplacement、pushNamedAndRemoveUntil、code
Navigator.pop(context, true); // returns true Navigator.of(context) .pushNamedAndRemoveUntil('/', (Route<dynamic> route) => false); //remove all the routes below the pushed route; Navigator.of(context).pushReplacementNamed('/'); //If non-null, result will be used as the result of the route that is removed; 複製代碼
文末:接下來還會寫些相關的文章,敬請期待。orm