首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将onTap()的值从一个页面传递到另一个dart/flutter

在Dart/Flutter中,可以通过以下几种方式将onTap()的值从一个页面传递到另一个页面:

  1. 使用构造函数传递值: 在源页面中,定义一个带有参数的构造函数,并在构造函数中将值传递给目标页面。然后在源页面中,创建目标页面的实例时,将值作为参数传递给构造函数。
  2. 示例代码:
  3. 示例代码:
  4. 使用路由参数传递值: 在源页面中,使用Navigator.pushNamed()方法跳转到目标页面,并将值作为参数传递给Navigator.pushNamed()方法。然后在目标页面中,通过ModalRoute.of(context)获取路由参数。
  5. 示例代码:
  6. 示例代码:
  7. 使用状态管理库传递值: 在源页面和目标页面之间使用状态管理库(如Provider、GetX、Riverpod等)来共享数据。在源页面中,将值存储在状态管理库中,然后在目标页面中获取该值。
  8. 示例代码(使用Provider状态管理库):
  9. 示例代码(使用Provider状态管理库):

这些方法可以根据具体的需求选择使用,它们都可以实现将onTap()的值从一个页面传递到另一个页面。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 中创建漂亮底部导航栏

」 (相同,但在固定图标的所有边上都有一白色圆圈) 「react」 (上标图标取代点击另一个图标) 「reactCircle」 (与上标图标中白色圆圈相同) 「textIn」 (选定离子出现相应标题...AppBar 高度 color icon/text 颜色 activeColor icon/text 选中态颜色 curveSize 凸形大小 top 凸形AppBar上边缘距离 style...预览图: 代码: 在 Convex_Bottom_Bar 演示中,首先,我们在这个类中创建一名为 MyHomePage ()有状态类,我们创建一为 0 变量 selectedpage...定义一名为 pageList列表,在这个列表中我们传递要添加到 bootom 导航栏中所有页面。...在 initialActiveIndexwe 中,我们传递已经定义变量 selectedpage,在 onTap 中,我们传递 index 并在 setState 中定义 setState () ,我们传递

8K10
  • 带你深入 Dart 解析一有趣引用和编译实验

    本篇主要通过一简单例子,讨论一下 Dart 代码里一有趣现象。 我们都知道 Dart 里一切都是对象,就连基础类型 int 、double 、bool 也都是 class 。...我们继续看编译后代码,如下代码所示,其实就是每次 idx 都通过 getItem.call(idx) 被 getItem index 引用,然后下次又再次传递对应 idx 进去,原理其实和上面的情况一样...是在点击后才输出参数,而对于 for (core::int* idx = 0; 来说,idx 作用域是在 for 循环之内,所以编译后在 onTap 内要有对应持有一,来保存需要输出结果。...而对于 for 循环外定义 core::int* idx , 循环内所有 onTap 都可以指向它这个地址,所以导致点击时都输出了同一 idx 。...对于局部变量,自动变量将会捕获,且是传递

    1.3K20

    Flutterhtml内容加载

    首先来聊聊如何通过flutter_html这个第三方库来解析html文档内容吧: 这是列表页面的代码,里面包含下拉刷新、上拉加载,以及加载中动画: import 'dart:convert'; import...onTap: () { //跳转到详情页面,并将aid传递过去...//点击对应条目之后响应 onTap: () { //跳转到详情页面,并将aid传递过去 Navigator.pushNamed(context, "/detailPage", arguments...,我们首先通过列表页面传递过来参数来网络请求页面详情数据,然后就能够得到网络返回html文本,之后我们通过flutter_html这个第三方来解析html文本内容,解析代码如下: Html(...详情页面的代码如下: import 'package:flutter/material.dart'; import 'package:flutter_inappbrowser/flutter_inappbrowser.dart

    16.6K43

    Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )

    : Hero 通过动画从 源界面 运动到 目标界面 时 , 目标界面 透明度逐渐增加 , 淡入显示 ; Hero 是界面的组成部分 , 在 源界面 和 目标界面 都存在该组件 ; Hero 动画涉及...API 较多 ; 一、创建 Hero 动画核心组件 ---- Hero 动画 tag 标识 : Hero 动画作用组件在两界面中都存在 , 给这两 Hero 组件都设置相同标识 , 通过该标识可以标识两...Hero 组件之间进行动画过渡 ; 该 Hero 动画组件封装内容 : VoidCallback onTap : 从外部传入一回调事件 , 这是点击组件后 , 回调函数 ; String imageUrl...} } 二、创建源页面 ---- 创建一 StatelessWidget 组件作为源页面 , 其中封装 HeroWidget 组件 , 作为显示核心组件 , 传入一 VoidCallback...://dart.cn/ Dart 开发者官网 : https://api.dart.dev/ Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com

    90620

    Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

    UI 显示 ; 设置点击方法 : BottomNavigationBar onTap 属性设置点击方法 , 传入 index 索引 , 该索引是被点击按钮索引 , 在该方法中主要操作当前 currentIndex..., /// 底部导航栏点击方法 onTap: (index) { // 控制 PageView 跳转到指定页面 _pageController.jumpToPage...页面滑动 /// 这里设置 PageView 页面滑动也能 onPageChanged: (index) { setState(() { // 更新当前索引..."), ), ); } } 页面 2 : import 'package:flutter/material.dart'; /// 图片页面 class ImagePage extends..."), ), ); } } 页面 3 : import 'package:flutter/material.dart'; /// 搜索页面 class SearchPage extends

    4.3K20

    Flutter 多语言、主题切换之GetX库

    先说说我们要做什么,首先我们需要做一底部导航栏,里面有两项内容,首页和我,首页我们可以什么都不写,而我里面你可以直接将多语言设置加在里面亦或者是再加一层进去,弄一设置页面,在设置页面中设置多语言...,下面我们创建另一个mine文件夹,里面创建一mine.dart,代码如下所示: import 'package:flutter/material.dart'; class Mine extends...,下面在my_home文件夹下创建一my_home.dart,里面装载我们前面写好页面,完成切换工作,代码如下所示: import 'package:flutter/material.dart...当我们第一次打开App时,默认是跟随系统语言,而我们切换为英文之后再重新打开App,发现没有变化,这是因为我们没有更改这个locale属性,因此就涉及持久化存储了,你想到了什么呢?...,主要内容就是一列表,用于点击Item切换语言项,切换之后返回上一页面,同时传过去, ⑥ mine.dart 最后我们改动一下mine.dart,如下所示: import 'package:flutter

    63601

    Flutter实例一--底部规则导航栏制作

    此时使用flutter run 来进行查看代码了,效果已经出现,在APP页面上已经出现了一底部导航栏,只不过现在还点击还没有什么效果。接下来开始制作切换页面。...3.子页面的编写 3.1新建一pages目录,装文件 ,然后在目录下面新建home_screen.dart文件,在里面写一HomeScreen组件,只放入一AppBar和一Center,然后用Text...这些是导航要用页面,有了这些页面,才能继续编写代码。 3.2 重写initState()方法 我们要重写initState()方法,把刚才做好页面进行初始化Widget数组中。...有了数组就可以根据数组索引来切换不同页面了。...4.BottomNavigationBar里响应事件 BottomNavigationBar组件里提供了一相应事件onTap,这个事件自带一索引index,通过索引我们就可以和我们list里索引相对应了

    1.4K30

    自定义 Flutter Drawer

    代码案例 首先,我们将创建一名为 flutter_drawer 项目。然后清除所有没用注释和代码,以便我们容易理解。...我们在 simple_drawer_screen.dart 文件中创建一名为 SimpleDrawerScreen 类,然后将其挂在 Material() home 属性上。...我们可以传递任意挂件 drawer 中,比如 Container 或者 SizeBox 并随后自定义它,但是我们最好是使用库中自带 Drawer 挂件,它依附于 Material Design。..., ), ); 输出 当我们运行,上面的代码将创建一简单且基础 drawer (页面),如下: 自定义 Drawer 现在,我们为 Drawer 添加些功能,正如我们说,导航页面和自定义它...当我们点击这些选项,它会重定向指定页面

    17310

    FlutterDialog

    Flutter中,各种提示框、弹出框是如何实现呢?今天我们就来聊一聊这个问题。 首先咱们来聊聊Flutter系统内置Dialog。...Flutter系统内置Dialog 关于Flutter系统内置Dialog,我们可以从两层面去讨论,一是showDialog层面,一是showModalBottomSheet层面。...showModalBottomSheet 前面我们讲了通过showDialog来弹出提示框,通过showDialog弹出提示框都是在页面的中间。接下来我们看看如何从页面底部弹出一Sheet。...代码如下: //自定义Dialog import 'package:flutter/material.dart'; //自定义Dialog,必须继承自Dialog class CustomDialog...此时我们可以使用定时器,代码如下: //自定义Dialog import 'dart:async'; import 'package:flutter/material.dart'; //自定义Dialog

    4.1K30

    Flutter UI如何使用Provide实现主题切换详解

    背景 provide是谷歌官方出品状态管理框架flutter-provide,它允许在小部件树中传递数据,它被设计为ScopedModel替代品,允许我们更加灵活地处理数据类型和数据 为什么需要状态管理...在进行项目的开发时,我们往往需要管理不同页面之间数据共享,在页面功能复杂,状态达到几十上百时候,我们会难以清楚维护我们数据状态,本文将以主题切换这个功能使用状态管理来讲解如何在Flutter...get 在需要使用页面中引入 import 'package:provide/provide.dart' 创建model (这才第一步) 新建 lib/store/models/config_state_model.dart...文件 import 'package:flutter/material.dart'; import 'package:flutter/foundation.dart' show ChangeNotifier...(倒数第二) lib/main.dart 文件 import 'package:flutter/material.dart'; import 'package:efox_flutter/store

    2.1K20

    Flutter Http网络操作实用教程

    在这篇文章中,将向大家分享Flutter网络操作一些实用知识和技巧,包括如何用Http库做get请求?、如何用Http库做post请求?、如何将Response转换成Dart object?...如何将Response转换成Dart object? 如何将请求结果展示在界面上?...它用于表示未来某个时间可能会出现可用或错误; http.Response:类包含一成功HTTP请求接收到数据; 在上一节讲解了Future用法,以及如何从Future中获取服务端具体返回数据...它用于表示未来某个时间可能会出现可用或错误; http.Response:类包含一成功HTTP请求接收到数据; 在上一节讲解了Future用法,以及如何从Future中获取服务端具体返回数据...参考资料 Flutter从入门进阶实战携程网App

    2.1K10

    Flutter 构建完整应用手册-导航器 顶

    将数据发送到新屏幕 通常,我们不仅要导航屏幕,还要将一些数据传递屏幕。 例如,我们经常想传递关于我们点击项目的信息。 请记住:屏幕只是部件™。 在这个例子中,我们将创建一Todos列表。...路线 定义一Todo类 创建Todos列表 创建一可以显示关于待办事项信息详情屏幕 导航并将数据传递详情屏幕 1.定义一Todo类 首先,我们需要一种简单方法来表示Todos。...在我们例子中,当用户点击我们列表中Todo时,我们需要导航DetailScreen。 当我们这样做时,我们也想将Todo传递给DetailScreen。...跨屏幕设置动画部件 在屏幕之间导航时,指导用户浏览我们应用通常很有帮助。 通过应用引导用户常用技术是将部件从一屏幕动画到下一屏幕。 这会创建一连接两屏幕视觉锚点。...我们如何使用Flutter将部件从一屏幕动画到下一屏幕? 使用Hero部件!

    4.9K10

    Flutter实现页面切换后保持原页面状态3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外开销,...它拥有一固定底部导航以及首页顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前页面状态都是始终维持,下面就具体介绍下如何在flutter中实现类似喜马拉雅导航效果...第一步:实现固定底部导航 在通过flutter create生成项目模板中,我们先简化一下代码,将MyHomePage提取到一单独home.dart文件,并在Scaffold脚手架中添加bottomNavigationBar...: onTap ), body: bodyList[currentIndex] ); } } 其中页面结构相同,均显示一计数器和一加号按钮,以first_page.dart为例:...,仅显示一计数器和一加号按钮,以推荐页recommend_page.dart为例: /// recommend_page.dart import 'package:flutter/material.dart

    2.7K30

    Flutter底部tab切换保持页面状态几种方法

    第一种方式:采用IndexdStack IndexdStack和Stack一样,都是层布局控件,可以在一控件上面放置另一个控件,但唯一不同是,IndexdStack在同一时刻只能显示子控件中控件...配置底部导航核心代码如下: import 'package:flutter/material.dart'; import 'package:flutter_jdshop/pages/tabs/CategoryPage.dart...使用IndexedStack来保持页面状态优点就是配置简单,但是它也有很大缺点:IndexedStack中管理页面在一开始就全部一次性加载出来了,不管有没有显示出来,然后通过index属性来确定到底显示哪一页面...AutomaticKeepAliveClientMixin结合底部BottomNavigationBar来保持页面状态时候,其配置步骤如下: import 'package:flutter/material.dart..._currentIndex, onTap: (index){ setState(() { //第4步,设置点击底部Tab时候页面跳转

    6K20
    领券