一、flutter中页面跳转之Navigator
核心概念
Route和Navigator。
定义:Route :是页面的一个抽象。
路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。
那么,路由就是不同Route之间的跳转。
Navigator:是负责管理Route的Widget,并且通过入栈和出栈来实现页面间的跳转。
1.使用命名方式来管理页面
mian.dart
import 'package:flutter/material.dart';import 'package:navigatortest/page/MyHomePage.dart';import 'package:navigatortest/router/route_handler.dart';void main() {runApp(const MyApp());}class MyApp extends StatefulWidget {const MyApp({Key key}) : super(key: key);// static final RouteObserver<PageRoute> routeObserver =//RouteObserver<PageRoute>(); //监听堆栈的变化@override_MyAppState createState() => _MyAppState();}class _MyAppState extends State<MyApp> {@overrideWidget build(BuildContext context) {return MaterialApp(// navigatorObservers: [MyApp.routeObserver], //onGenerateRoute: AppRouteManager.getInstance().onGenerateRoute,home: MyHomePage(),);}}
层级目录
homePage.dart
import 'package:flutter/material.dart';class MyHomePage extends StatefulWidget {const MyHomePage({Key key }) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(_userName),),body: Container(child:Column(children: [RaisedButton(child: Text("无参路由跳转"),onPressed: (){Navigator.pushNamed(context, '/firstPage', );},),],),),);}
firstPage.dart
import 'package:flutter/material.dart';class firstPage extends StatefulWidget {const firstPage({Key key}) : super(key: key);@override_firstPageState createState() => _firstPageState();}class _firstPageState extends State<firstPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("firstpage"),),body: Container(child: Column(children: [RaisedButton(child: Text("page1"),onPressed: () {Navigator.pop(context);},),],),),);}}
navigator.pop(context)携带参数返回
firstPage.dart
import 'package:flutter/material.dart';class firstPage extends StatefulWidget {const firstPage({Key key}) : super(key: key);@override_firstPageState createState() => _firstPageState();}class _firstPageState extends State<firstPage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("firstpage"),),body: Container(child: Column(children: [RaisedButton(child: Text("携带参数返回"),onPressed: () {Navigator.pop(context, {"name": "携带参数返回",});},),],),),);}}
HomePage.dart
import 'package:flutter/material.dart';class MyHomePage extends StatefulWidget {const MyHomePage({Key key }) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {String _userName = "";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(_userName),),body: Container(child:Column(children: [// RaisedButton(// child: Text("无参路由跳转"),// onPressed: (){//Navigator.pushNamed(context, '/firstPage', );// },// ),// RaisedButton(// child: Text("代参数路由跳转"),// onPressed: () {//Navigator.pushNamed(context, '/SecondPage', arguments: {// "name":"张三"//});// },// ),RaisedButton(child: Text("路由返回传值"),onPressed: (){_getName();},),// SizedBox(height: 100,),],),),);}void _getName() async {dynamic params = await Navigator.of(context).pushNamed("/firstPage");if (params != null) {setState(() {_userName = params["name"];});}}}
homepage.dart
import 'package:flutter/material.dart';class MyHomePage extends StatefulWidget {const MyHomePage({Key key }) : super(key: key);@override_MyHomePageState createState() => _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {String _userName = "";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(_userName),),body: Container(child:Column(children: [// RaisedButton(// child: Text("无参路由跳转"),// onPressed: (){//Navigator.pushNamed(context, '/firstPage', );// },// ),RaisedButton(child: Text("代参数路由跳转"),onPressed: () {Navigator.pushNamed(context, '/SecondPage', arguments: {"name":"张三"});},),// RaisedButton(// child: Text("路由返回传值"),// onPressed: (){// _getName();// },// ),// SizedBox(height: 100,),],),),);}void _getName() async {dynamic params = await Navigator.of(context).pushNamed("/firstPage");if (params != null) {setState(() {_userName = params["name"];});}}}
secodePage.dart
import 'package:flutter/material.dart';class SecondPage extends StatefulWidget {final Map arguments;SecondPage({this.arguments});@override_SecondPageState createState() => _SecondPageState();}class _SecondPageState extends State<SecondPage> {String name;@overridevoid initState() {super.initState();name = widget.arguments['name'];}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("page2"),),body: Container(child:Column(children: [RaisedButton(child: Text("返回上一级"),onPressed: (){Navigator.pop(context,"路由返回携带");},),Container(child: Text(name),)],),),);}}
二、flutter异步编程
所谓异步编程表示同时可以做几件事情,不需要等待任何事情做完就可以做其他的事情.这样可以提高程序运行的效率
三、Flutter-Json转实体类(插件FlutterJsonBeanFactory)
FlutterJsonBeanFactory
重启一下
2.
在pubspec.yaml中引入下面的库
dependencies:json_annotation: ^4.0.1build_runner: ^2.0.4json_serializable: ^4.1.3
创建实体类
https://caijinglong.github.io/json2dart/index_ch.html
使用Json工具生成实体类
生成fromJson和toJson方法
在terminal中输入命令:flutter packages pub run build_runner build
3.JSON to Dart