2022-4-28

前言

一、给指定route传值

1.定义传递参数

2.创建组件来获取参数

3.路由表注册

4.组件导航

二、页面回传数据

1.回调函数中传入回传数据信息

三、传递数据至新的页面

1.构造器传参

2.RouteSettings传参

总结

前言

Navigator组件支持通过使用通用标识符从应用程序的任何地方导航到特定路由。在某些情况下，w我们可能还希望能够传递参数给特定路由。

一、给指定route传值

1.定义传递参数

代码如下（示例）：

class ScreenArguments { final String title; final String message; ScreenArguments(this.title, this.message); }

2.创建组件来获取参数

函数原型：

ModalRoute<int>? route = ModalRoute.of<int>(context);

使用：

final ScreenArguments args = ModalRoute.of(context)!.settings.arguments；

完整代码如下（示例）：

// A Widget that extracts the necessary arguments from
// the ModalRoute.
class ExtractArgumentsScreen extends StatelessWidget {const ExtractArgumentsScreen({Key? key}) : super(key: key);static const routeName = '/extractArguments';@overrideWidget build(BuildContext context) {// Extract the arguments from the current ModalRoute// settings and cast them as ScreenArguments.final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments;return Scaffold(appBar: AppBar(title: Text(args.title),),body: Center(child: Text(args.message),),);}
}

3.路由表注册

与之前无差别，即在material下使用route标记特定路线

代码如下

MaterialApp(routes: {'ExtractArgumentsScreen': (context) =>const ExtractArgumentsScreen(),},
)

4.组件导航

Navigator.pushNamed方法的扩展，其存在arguments:的属性可用于传递值

代码如下

ElevatedButton(onPressed: () {// When the user taps the button,// navigate to a named route and// provide the arguments as an optional// parameter.Navigator.pushNamed(context,ExtractArgumentsScreen.routeName,arguments: ScreenArguments('Extract Arguments Screen','This message is extracted in the build method.',),);},child: const Text('Navigate to screen that extracts arguments'),
),

二、页面回传数据

1.回调函数中传入回传数据信息

Navigator.pop(context, '*****');

三、传递数据至新的页面

1.构造器传参

（1）构造以传入数据为参数的构造器

class DetailScreen extends StatelessWidget {// In the constructor, require a Todo.const DetailScreen({Key? key, required this.todo}) : super(key: key);// Declare a field that holds the Todo.final Todo todo;@overrideWidget build(BuildContext context) {// 使用 Todo 对象构建 UI (Use the Todo to create the UI)return Scaffold(appBar: AppBar(title: Text(todo.title),),body: Padding(padding: const EdgeInsets.all(16.0),child: Text(todo.description),//),);}
}

（2）Navigator.push时传入构造器

onTap: () {Navigator.push(context,MaterialPageRoute(builder: (context) => DetailScreen(todo: todos[index]),),);},

2.RouteSettings传参

（1）使用ModalRoute.of(context)!.settings.arguments使参数可被我们操作

class DetailScreen extends StatelessWidget {const DetailScreen({Key? key}) : super(key: key);//不需要放入构造器@overrideWidget build(BuildContext context) {final todo = ModalRoute.of(context)!.settings.arguments as Todo;// Use the Todo to create the UI.return Scaffold(appBar: AppBar(title: Text(todo.title),),body: Padding(padding: const EdgeInsets.all(16.0),child: Text(todo.description),),);}
}

（2）设置settings可选参数传入arguments

onTap: () {Navigator.push(context,MaterialPageRoute(builder: (context) => const DetailScreen(),// Pass the arguments as part of the RouteSettings. The// DetailScreen reads the arguments from these settings.settings: RouteSettings(arguments: todos[index],),),);},

总结

本文总结了flutter最基本的传递数据方法

flutter学习笔记--传递信息相关推荐

Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
Flutter学习笔记 —— 完成一个简单的新闻展示页
Flutter学习笔记 -- 完成一个简单的新闻展示页前言思路分析案例代码结束语上图前言刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...
Flutter学习笔记（一）
Flutter学习笔记(一) 学习前言 dart安装 vscode配置持续更新中学习前言最近准备学习Flutter,参考B站 Dart Flutter教程_2022精讲Dart Flutter3 ...
Flutter学习笔记（18）--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
Flutter学习笔记--Gridview网格组件制作相册
Flutter学习笔记–Gridview网格组件制作相册效果: GridView可以构建一个二维网格列表,其官方定义参考: https://book.flutterchina.club/chapte ...
Flutter学习笔记（二）登陆注册界面的实现
Flutter学习笔记(二)登陆注册界面的实现简单的登录和注册界面的布局 SharedPreferences存储数据页面路由和参数传递的心得这几天按照顺序先完成了登录和注册的页面,没有什么特别的 ...
Flutter学习笔记之-圆形头像实现方式
Flutter学习笔记之-圆形头像实现方式开发中如何实现类似圆形图片 Container+BoxDecoration来实现圆角图像 class DemoWidget extends Stateles ...
Flutter学习笔记 —— CustomPainter自定义画布绘制爱心
Flutter学习笔记 -- CustomPainter自定义画布绘制爱心前言效果图代码示例温馨提示结束语前言最近在学习Flutter中 Canvas相关内容,今天尝试写了一个爱心Dem ...
Flutter学习笔记08-Padding Row Column Flex Expanded组件详解
学习视频地址:https://www.bilibili.com/video/BV1S4411E7LY?p=27&spm_id_from=pageDriver&vd_source=cee ...

flutter学习笔记--传递信息

前言

一、给指定route传值

1.定义传递参数

2.创建组件来获取参数

3.路由表注册

4.组件导航

二、页面回传数据

1.回调函数中传入回传数据信息

三、传递数据至新的页面

1.构造器传参

2.RouteSettings传参

总结

flutter学习笔记--传递信息相关推荐

最新文章

热门文章