Flutter中的路由实现方式

文章目录

导航到一个新页面和返回
导航到一个新页面带参数返回
通过构造函数携带参数跳转
通过RoutSettings携带参数跳转
命名路由
给特定路由传参
转场动画路由Hero

导航到一个新页面和返回

Navigator.push方法
跳转后样子

import 'package:flutter/material.dart';void main(){runApp(MaterialApp(title: '基本路由',home: FirstRoute(),));
}class FirstRoute extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('First Route'),),body: Center(child: RaisedButton(child: Text('Open route'),onPressed: (){
//              Navigator.push跳转的页面自带返回键Navigator.push(context, MaterialPageRoute(builder: (context) => SecondRoute()));}),),);}
}class SecondRoute extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Second Route'),),body: Center(child: RaisedButton(child: Text('Go back'),onPressed: (){Navigator.pop(context);}),),);}
}

导航到一个新页面带参数返回

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: '带参数返回路由',home: HomeScreen(),));
}
//第一屏页面
class HomeScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Returning with data'),),body: Center(child: SelectionButton(),),);}
}class SelectionButton extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn RaisedButton(onPressed: () {_navigateAndDisplaySelection(context);},child: Text('Pick an option, any option!'),);}_navigateAndDisplaySelection(BuildContext context) async {//用result接受第二屏的返回值final result = await Navigator.push(context,MaterialPageRoute(builder: (context) => SelectionScreen()),);//级联操作符 (..) 可以在同一个对象上 连续调用多个函数以及访问成员变量。 使用级联操作符可以避免创建 临时变量Scaffold.of(context)..removeCurrentSnackBar()..showSnackBar(SnackBar(content: Text("$result"),));}
}//第二屏页面
class SelectionScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Pick an option'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Padding(padding: const EdgeInsets.all(8.0),child: RaisedButton(onPressed: () {// 在这里返回 "Yep"Navigator.pop(context,'Yep!');},child: Text('Yep'),),),Padding(padding: const EdgeInsets.all(8.0),child: RaisedButton(onPressed: () {// 在这里返回 "Noep"Navigator.pop(context,'Noep!');}, child: Text('Noep'),),),],),),);}
}

通过构造函数携带参数跳转

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';void main() {runApp(MaterialApp(title: '携参数跳转',home:TodosScreen(todos: List.generate(20, (i)=> Todo('Todo $i','A description of what needs to be done for Todo $i'))),));
}// 数据类（要携带的数据）
class Todo {final String title;final String description;Todo(this.title, this.description);}class TodosScreen extends StatelessWidget {final List<Todo> todos;TodosScreen({Key key, @required this.todos}) : super(key: key);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Todos'),),body: ListView.builder(itemCount: todos.length,itemBuilder: (context, index) {return ListTile(title: Text(todos[index].title),onTap: () {Navigator.push(context, MaterialPageRoute(builder: (context) => DetailScreen(todo: todos[index]),));},);}),);}}//构造函数接受传递过来的参数
class DetailScreen extends StatelessWidget{final Todo todo;DetailScreen({Key key, @required this.todo}) : super(key: key);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text(todo.title),),body: Padding(padding: EdgeInsets.all(16.0),child: Text(todo.description),),);}
}

通过RoutSettings携带参数跳转

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';void main() {runApp(MaterialApp(title: 'RouteSettings携参数跳转',home: TodosScreen(todos: List.generate(20,(i) => Todo('Todo $i','A description of what needs to be done for Todo $i'))),));
}// 数据类（要携带的数据）
class Todo {final String title;final String description;Todo(this.title, this.description);
}class TodosScreen extends StatelessWidget {final List<Todo> todos;TodosScreen({Key key, @required this.todos}) : super(key: key);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Todos'),),body: ListView.builder(itemCount: todos.length,itemBuilder: (context, index) {return ListTile(title: Text(todos[index].title),onTap: () {Navigator.push(context,MaterialPageRoute(builder: (context) => DetailScreen(),//通过RouteSettings传递参数settings: RouteSettings(arguments: todos[index])));},);}),);}
}//构造函数接受传递过来的参数
class DetailScreen extends StatelessWidget {//  DetailScreen({Key key, @required this.todo}) : super(key: key);@overrideWidget build(BuildContext context) {//通过ModalRoute取参数final Todo todo = ModalRoute.of(context).settings.arguments;return Scaffold(appBar: AppBar(title: Text(todo.title),),body: Padding(padding: EdgeInsets.all(16.0),child: Text(todo.description),),);}
}

命名路由

import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: '命名路由',//当使用 initialRoute 时，需要确保你没有同时定义 home 属性initialRoute: '/',routes: {// 当我们跳转到“/”时，构建 FirstScreen'/':(context) => FirstScreen(),// 当我们跳转到“/second”时，构建 SecondScreen'/second':(context) =>SecondScreen(),},));
}class FirstScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('First Screen'),),body: Center(child: RaisedButton(onPressed: () {
//          点击时跳转到第二个界面Navigator.pushNamed(context, '/second');},child: Text('Launch screen'),),),);}}
class SecondScreen extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Second Screen'),),body: Center(child: RaisedButton(onPressed: (){// 点击时跳转回第一个界面！Navigator.pop(context);},child: Text('Go back!'),),),);}}

给特定路由传参

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(//通过 onGenerateRoute() 函数提取参数，然后把参数传递给组件,和routes是两种方式onGenerateRoute: (settings) {if (settings.name == PassArgumentsScreen.routeName) {final ScreenArguments arguments = settings.arguments;return MaterialPageRoute(builder: (context) {return PassArgumentsScreen(title: arguments.title,message: arguments.message,);});}return null;},title: '给特定路由传参',home: HomeScreen(),routes: {//把组件注册到路由表中ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),},);}
}class ScreenArguments {final String title;final String message;ScreenArguments(this.title, this.message);
}class HomeScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home Screen'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[RaisedButton(onPressed: () {Navigator.pushNamed(context, ExtractArgumentsScreen.routeName,arguments: ScreenArguments('秦时明月','沧海横流',));},child: Text('Navigate to screen that extracts arguments'),),RaisedButton(onPressed: () {Navigator.pushNamed(context, PassArgumentsScreen.routeName,arguments: ScreenArguments('九歌·少司命','悲莫悲兮生别离，乐莫乐兮新相知'));},child: Text('Navigate to a named that accepts arguments'),),],),),);}
}//ModalRoute接受参数
class ExtractArgumentsScreen extends StatelessWidget {static const routeName = '/extractArguments';@overrideWidget build(BuildContext context) {
//    ModalRoute.of() 方法返回的是当前路由及其携带的参数final ScreenArguments arguments = ModalRoute.of(context).settings.arguments;return Scaffold(appBar: AppBar(title: Text(arguments.title),),body: Center(child: Text(arguments.message),),);}
}//构造方法接受参数
class PassArgumentsScreen extends StatelessWidget {static const routeName = '/passArguments';final String title;final String message;PassArgumentsScreen({Key key, @required this.title, @required this.message}): super(key: key);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: Text(message),),);}
}

转场动画路由Hero

import 'package:flutter/material.dart';void main() => runApp(HeroAPP());class HeroAPP extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(title: 'Transition Demo',home: MainScreen(),);}}
class MainScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(appBar: AppBar(title: Text('Main Screen'),),body: GestureDetector(onTap: () {Navigator.push(context, MaterialPageRoute(builder: (_) {return DetailScreen();}));},child: Hero(tag: 'imageHero',child: Image.network('https://picsum.photos/250?image=9'),)),);}
}class DetailScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(body: GestureDetector(onTap: () {Navigator.pop(context);},child: Center(child: Hero(tag: 'imageHero',child: Image.network('https://picsum.photos/250?image=9'),),),),);}
}

Flutter中的路由实现方式相关推荐

Flutter中管理路由栈的方法和应用
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_34396103/arti ...
flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级在前面的例子中,当从Home.dar ...
Flutter实践：深入探索 flutter 中的状态管理方式(1)
利用 Flutter 内置的许多控件我们可以打造出一款不仅漂亮而且完美跨平台的 App 外壳,我利用其特性完成了类似知乎App的UI界面,然而一款完整的应用程序显然不止有外壳这么简单.填充在外壳里面的 ...
Flutter 中的基本路由
Flutter 中的路由通俗的讲就是页面跳转.在 Flutter 中通过 Navigator 组件管理路由导航,并提供了管理堆栈的方法.如:Navigator.push 和 Navigator.pop ...
Flutter之自定义路由切换动画
Flutter之自定义路由切换动画在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等.默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要 ...
【Flutter】Flutter 调试 ( 调试回退功能 | Debug 调试中查看变量的方式 | 控制台信息 )
文章目录一.调试回退功能二.Debug 调试中查看变量的方式三.Debug 控制台信息四.相关资源一.调试回退功能在调试过程中 , 经常错过关键位置的调试 , 如没有进入关键方法进行调试 ...
Angular中实现路由跳转并通过get方式传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
SPA 中前端路由基本原理与实现方式
SPA 前端路由原理与实现方式通常 SPA 中前端路由有2中实现方式,本文会简单快速总结这两种方法及其实现: 修改 url 中 Hash 利用 H5 中的 history Hash 我们都知道 ur ...

Flutter中的路由实现方式

文章目录

导航到一个新页面和返回

导航到一个新页面带参数返回

通过构造函数携带参数跳转

通过RoutSettings携带参数跳转

命名路由

给特定路由传参

转场动画路由Hero

Flutter中的路由实现方式相关推荐

最新文章

热门文章