300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > flutter中页面跳转之Navigator

flutter中页面跳转之Navigator

时间:2022-04-05 16:53:45

相关推荐

flutter中页面跳转之Navigator

一、flutter中页面跳转之Navigator

核心概念

RouteNavigator

定义: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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。