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

如何在ModalBottomSheet pop后更新原始页面的状态?

在Flutter中,可以通过以下步骤在ModalBottomSheet弹出后更新原始页面的状态:

  1. 在原始页面中定义一个状态变量,用于保存需要更新的数据。
代码语言:txt
复制
var data = '初始数据';
  1. 在原始页面中创建一个函数,用于接收ModalBottomSheet返回的数据并更新状态。
代码语言:txt
复制
void updateData(String newData) {
  setState(() {
    data = newData;
  });
}
  1. 在原始页面中调用showModalBottomSheet函数弹出ModalBottomSheet,并传递updateData函数作为回调。
代码语言:txt
复制
void _showModalBottomSheet() {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        child: Column(
          children: [
            Text('ModalBottomSheet内容'),
            RaisedButton(
              child: Text('更新数据'),
              onPressed: () {
                Navigator.pop(context, '更新后的数据');
              },
            ),
          ],
        ),
      );
    },
  ).then((value) {
    updateData(value);
  });
}
  1. 在ModalBottomSheet中,通过Navigator.pop函数返回更新后的数据。
  2. 在原始页面中通过then函数获取返回的数据,并调用updateData函数更新状态。

这样,当ModalBottomSheet弹出后,点击按钮更新数据并关闭ModalBottomSheet时,原始页面的状态会被更新。

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

相关·内容

前端vue面试题集锦1

应用跳转,就是切换相关组件,仅仅刷新局部资源。MPA多页面应用 (MultiPage Application),指有多个独立页面的应用,每个页面必须重复加载js、css等相关资源。...需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分,而 Model 层的数据模型是只包含状态的,比如页面的这一块展示什么,而页面加载进来时发生什么,点击这一块发生什么,这一块滚动时发生什么这些都属于视图行为...在 Vue2 中, 0bject.defineProperty 会改变原始数据,而 Proxy 是创建对象的虚拟表示,并提供 set 、get 和 deleteProperty 等处理器,这些处理器可在访问或修改原始对象上的属性时进行拦截...Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。...当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新

57130

H5 页面列表缓存方案

但刚才说的都是 App,在原生 App 中,页面是一层层的 View,盖在 LastPage 上,天然就能够保存上一个页面的状态,而 H5 不同,从详情返回到列表状态会被清除掉,重新走一遍生命周期,...会重新发起请求,会有新的状态写入,对于分页接口,列表很长,当用户翻了好几页,点击详情看看商品详情再返回列表,此时页面回到第一,这样用户体验很差,如果在进入详情的时候将列表数据缓存起来,返回列表的时候用缓存数据...第二种解决方案就是手动保存状态,即在页面卸载时手动将页面的状态收集存储起来,在页面挂载的时候进行数据恢复,个人采用的就是简单粗暴的后者,实现上比较简单。...,在离开页面的时候存起来,再次进入的时候拿到数据跳转到之前的高度,除此之外,还有很多别的缓存的方式,可以缓存整个页面,缓存 state 的数据等等,这些都可以达到我们想要的效果,具体用哪一种要看具体的业务场景...何时取 在进入缓存页面的时候取,取的时候又有几种情况 当导航操作为 POP 时取,因为每当 PUSH 时,都算是进入一个新的页面,这种情况是不应该用缓存数据。

1.5K20

【Flutter 专题】57 图解页面小跳转 (三)

popUntil 采用 popUntil 时,若预到达页面已在页面栈中,则从自身开始逐个销毁预到达页面的上级栈页面;很像 Android 中 SingleTask 栈内复用模式;若预到达页面不在页面栈中...predicate(_history.last)) pop(); } 这样我们可以用最直接的方法手动调用 pop(result) 传递一个状态码,在各页面的 then 方法中接收判断...路由动效 在实际项目中,页面的展示方式并非单一模式,有些页面需要特定的路由效果,此时可以参考 PageRouteBuilder 自定义动画效果; PageRouteBuilder({...this.transitionDuration = const Duration(milliseconds: 300), // 动画持续时间 this.opaque = true, // 完成路由是否遮盖底部页面...secondaryAnimation, Widget child); 和尚实现一个简单的对话框:由底部弹出且透明度由 0.0 到 1.0;但和尚在测试时 barrierColor 进入时在对话框展示完成展示

1.7K41

字节前端二面高频vue面试题整理_2023-02-24

Vue 单应用与多应用的区别 概念: SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。...单应用跳转,就是切换相关组件,仅仅刷新局部资源。 MPA多页面应用 (MultiPage Application),指有多个独立页面的应用,每个页面必须重复加载js、css等相关资源。...,每一次状态发生变化状态变化的信号会发送给组件,组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点,然后对 DOM 进行更新操作,每次更新状态的渲染过程需要更多的计算,...ctrl .alt .shift .meta 鼠标按钮修饰符 .left .right .middle 对 React 和 Vue 的理解,它们的异同 相似之处: 都将注意力集中保持在核心库,而将其他功能路由和全局状态管理交给相关的库...beforeUpdate:可以在这个钩子中进一步的更改状态,不会触发重渲染。 updated:可以执行依赖于DOM的操作,但是要避免更改状态,可能会导致更新无线循环。

1.3K50

京东一面:浏览器跨标签通信的方式都有什么?

跨标签通信也有很多实际的应用场景,比如: 共享登录状态:当用户在一个标签中登录,其他打开的标签需要及时获取到登录状态,以保持一致的用户体验。...在这种情况下,可以使用浏览器的localStorage或sessionStorage来存储登录状态,并通过监听storage事件来实现不同标签之间的状态同步。...标签之间的导航同步:当用户在一个标签中进行导航操作(例如点击链接或提交表单)时,其他标签可能也需要跟随导航到相应的页面。这可以通过在标签之间发送消息或共享状态来实现导航的同步。...借助服务端的实时通信技术,WebSocket,通过服务器作为中介来实现标签之间的消息传递和数据同步。...在 install 事件中,你可以缓存静态资源, HTML、CSS、JavaScript 文件,以便在离线时使用; 激活: 安装成功,Service Worker 并不会立即接管页面的网络请求。

14310

小程序可测性能力建设与实践

作为终端产品的一种形态,小程序是运行在宿主应用(微信、快手、百度等)之上的“轻应用”,在2017年由微信推出发展迅速。...运用图像处理技术的自动化测试工具Airtest进行测试,它们主要关注于界面层面的操作,未能触及应用程序背后的逻辑处理,因此仍属于“黑盒测试”的范畴。...新方法的入参与原始wx.request一致,包括请求头、请求地址、响应体等,因此可以对这些参数进行修改(12行),比如替换请求域名、增加请求头、修改响应体数据等; c.最后用修改的参数使用原始方法进行执行...需求背景 用户从商品详情进入到填单,在选择日期、数量或填写游玩人等信息,为了减少用户的操作,再次进入该填单需要保持之前填写的信息不变。...测试路径较为繁琐,因此,对缓存的可控性改造,传入相应的配置指令(2.2部分介绍),控制缓存中的数据,直达被测页面和状态,并通过自动化测试比对当前运行的页面和页面基准图,判断它是否正确被渲染,以此分别从数据和

8710

vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

Vue.js是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是,Vue设计为可以自底向上逐层应用,Vue的核心库只关注视图层。...view层执行一个数据的双向绑定,view触发告诉viewmodel对象的dom listeners事件的监听机制,从而更新model层中的数据,当model层中的数据发生变化,交给数据双向绑定机制...数组变异方法: push(),pop(),unshift(),shift() sort(),reverse() splice() push(): 在数组元素末尾添加元素 pop(): 在数组元素末尾删除元素...10条数据,当前page参数 第一从0,...,9 数组数据下标是从0开始的 开始下标:offset = (page-1)*pagesize 结束下标: offset + pagesize items.slice...、beforeMount(载入前)、mounted(载入)、beforeUpdate(更新前)、updated(更新)、beforeDestroy(销毁前)、destroyed(销毁 ?

4K20

浅谈Java虚拟机(HotSpot)的内存回收相关细节

但问题是如何变脏,即如何在对象赋值的那一刻去更新维护卡表呢? 假如是解释执行的字节码,那相对好处理,虚拟机负责每条字节码指令的执行,有充分的介入空间; 但在编译执行的场景中呢?...经过即时编译的代码已经是纯粹的机器指令流了, 这就必须找到一个在机器码层面的手段,把维护卡表的动作放到每一个赋值操作之中。...; // 写屏障, 在这里完成卡表状态更新 post_write_barrier(field, new_value); } 复制代码 写屏障存在的一些问题 应用写屏障,虚拟机就会为所有赋值操作生成相应的指令...在HotSpot虚拟机中, 增量更新原始快照这两种解决方案都有实际应用, 譬如, CMS是基于增量更新来做并发标记的, G1、 Shenandoah则是用原始快照来实现。...同时提到了用户线程与收集器是并发工作将会导致对象消失的问题,还提到了通过增量更新原始快照这两种方案来解决该问题。

46820

微信小程序官方组件展示之媒体组件live-player源码

一级类目/主体类型二级类目小程序内容场景社交直播涉及娱乐性质,明星直播、生活趣事直播、宠物直播等。.../Array否设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(: ["push", "pop"])2.10.3合法值说明[]取消小窗push路由 push 时触发小窗pop...播放器会开始调控延时小窗特性说明live-player 小窗支持以下三种触发模式(在组件上设置 picture-in-picture-mode 属性):1.push 模式,即从当前跳转至下一时出现小窗...(页面栈push)2.pop 模式,即离开当前页面时触发(页面栈pop)3.以上两种路由行为均触发小窗此外,小窗还支持以下特性:l 小窗容器尺寸会根据原组件尺寸自动判断l 点击小窗,用户会被导航回小窗对应的播放器页面...l 小窗出现,用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗当播放器进入小窗模式,播放器所在页面处于 hide 状态(触发 onHide

1.2K30

vue高频面试题合集(三)附答案

为了解决这个问题,经过 vue 内部处理可以使用以下几种方法来监听数组push();pop();shift();unshift();splice();sort();reverse();复制代码由于只针对了以上...Vue 单应用与多应用的区别概念:SPA单页面应用(SinglePage Web Application),指只有一个主页面的应用,一开始只需要加载一次js、css等相关资源。...单应用跳转,就是切换相关组件,仅仅刷新局部资源。MPA多页面应用 (MultiPage Application),指有多个独立页面的应用,每个页面必须重复加载js、css等相关资源。...执行原理应用到具体案例中的示例,引入异步更新队列机制的原因∶如果是同步更新,则多次对一个或多个属性赋值,会频繁触发 UI/DOM 的渲染,可以减少一些无用渲染同时由于 VirtualDOM 的引入,每一次状态发生变化...,状态变化的信号会发送给组件,组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点,然后对 DOM 进行更新操作,每次更新状态的渲染过程需要更多的计算,而这种无用功也将浪费更多的性能

64440

每日一题之Vue数据劫持原理是什么?5

:Object.keys(obj).forEach(key => { Object.defineProperty(obj, key, { // ... })})3).必须深层遍历嵌套的对象所谓的嵌套对象...原型上的方法直接重写了// 先把原型上的方法copy一份,去重写(加上视图更新的操作)// 再去调用最原始的push方法接下来说一下Object.defineProperty()的升级版...,简单说一下 依赖管理方案Object.defineProperty 只是解决了状态变更,如何触发通知的问题,那要通知谁呢?...简单来说:第一步,通过 Observer 提供的接口,遍历状态对象,给对象的每个属性、子属性都绑定了一个专用的 Dep 对象。这里的状态对象主要指组件当中的data属性。...调用 initWatch 方法,将 watch 配置转化为 watcher 实例undefined3.调用 mountComponent 方法,为 render 函数绑定 watcher 实例第三步,状态变更

49630

每日一题之Vue数据劫持原理是什么?

:Object.keys(obj).forEach(key => { Object.defineProperty(obj, key, { // ... })})3).必须深层遍历嵌套的对象所谓的嵌套对象...原型上的方法直接重写了// 先把原型上的方法copy一份,去重写(加上视图更新的操作)// 再去调用最原始的push方法接下来说一下Object.defineProperty()的升级版...,简单说一下 依赖管理方案Object.defineProperty 只是解决了状态变更,如何触发通知的问题,那要通知谁呢?...简单来说:第一步,通过 Observer 提供的接口,遍历状态对象,给对象的每个属性、子属性都绑定了一个专用的 Dep 对象。这里的状态对象主要指组件当中的data属性。...调用 initWatch 方法,将 watch 配置转化为 watcher 实例undefined3.调用 mountComponent 方法,为 render 函数绑定 watcher 实例第三步,状态变更

47620

每日一题之Vue数据劫持原理

:Object.keys(obj).forEach(key => { Object.defineProperty(obj, key, { // ... })})3).必须深层遍历嵌套的对象所谓的嵌套对象...原型上的方法直接重写了// 先把原型上的方法copy一份,去重写(加上视图更新的操作)// 再去调用最原始的push方法接下来说一下Object.defineProperty()的升级版...,简单说一下 依赖管理方案Object.defineProperty 只是解决了状态变更,如何触发通知的问题,那要通知谁呢?...简单来说:第一步,通过 Observer 提供的接口,遍历状态对象,给对象的每个属性、子属性都绑定了一个专用的 Dep 对象。这里的状态对象主要指组件当中的data属性。...调用 initWatch 方法,将 watch 配置转化为 watcher 实例undefined3.调用 mountComponent 方法,为 render 函数绑定 watcher 实例第三步,状态变更

48530

Flutter完整开发实战详解(二、 快速开发实战篇)

直到 flutter v0.5.7 sdk 版本修复,问题依旧没有完全解决,所以无奈最终修改了实现方案。  ...也就是你可以通过 Navigator 的 pop 时返回参数,之后在 Future 中可以的监听中处理页面的返回结果。...reducer 用于根据 action 产生新状态 store 用于存储和管理 state,监听 action,将 action 自动分配给 reducer 并根据 reducer 的执行结果更新 state...其实 WillPopScope 并不是监听返回按键,名字一般,是当前页面将要被pop时触发的回调。   通过onWillPop回调返回的Future,判断是否响应 pop 。...Android启动,在 android/app/src/main/res/drawable/launch_background.xml 中已经有写好的启动, 部分被屏蔽,

4.9K30

Flutter完整开发实战详解(二、 快速开发实战篇)

直到 flutter v0.5.7 sdk 版本修复,问题依旧没有完全解决,所以无奈最终修改了实现方案。  ...也就是你可以通过 Navigator 的 pop 时返回参数,之后在 Future 中可以的监听中处理页面的返回结果。...reducer 用于根据 action 产生新状态 store 用于存储和管理 state,监听 action,将 action 自动分配给 reducer 并根据 reducer 的执行结果更新 state...其实 WillPopScope 并不是监听返回按键,名字一般,是当前页面将要被pop时触发的回调。   通过onWillPop回调返回的Future,判断是否响应 pop 。...Android启动,在 android/app/src/main/res/drawable/launch_background.xml 中已经有写好的启动, 部分被屏蔽,

5.1K10

干掉项目中杂乱的 if-else,试试状态模式,这才是优雅的实现方式!

每天 10:33 更新文章,每天掉亿点点头发......同时还不能忘记处理各种异常,如未知字符、容器内是原始类型、容器未正确闭合等。...事件 Event:事件就是某一时刻施加于系统的某个信号,在上面的例子中事件是指红灯、绿灯和黄灯。所有的状态变化都要依赖事件,但事件也可能导致状态不发生变化,正常行驶中遇到绿灯就不用做什么反应。...通过上面的图一步步拆解状态机: 首先是确定状态,我定义了 Start/SetStart/SetEle/ListStart/ListEel/MapStart/MapLeft/MapRight 八种基础状态...变幻和动作都是事件发生系统的反应,在我的需要里需要转变解析状态,并将结构结果保存起来。

26820

深入探究Flutter中的页面导航器:Navigator详解

下面我们来学习如何在Flutter中进行页面路由导航,以及如何使用Navigator.push和Navigator.pop进行页面的跳转和返回操作。 1....Navigator.pop(context); 在上面的示例中,我们调用Navigator.pop方法,实现了从当前页面返回到上一个页面的操作。...本节将探讨如何在Flutter中保持页面状态,并演示使用AutomaticKeepAliveClientMixin和KeepAlive来实现路由保持状态的方法。 1....在Flutter中,可以通过路由参数传递数据,也可以通过全局状态管理器(Provider、Riverpod等)来共享数据。...如何在页面返回时传递数据? 可以通过Navigator.pop方法的第二个参数来传递数据。在返回时,可以通过await关键字获取pop方法的返回值,从而获取传递的数据。

81610

5分钟了解系统架构设计(6)

商品抢购:商品抢购倒计时结束,用户提交抢购订单,排队等待抢购结果,抢购成功,扣减系统库存,生成抢购订单。 订单支付:等待用户支付成功,系统更新订单状态,通知用户购买成功。...预约阶段难点:如何在高并发的情况下,让每个用户都能得到抢够资格。...服务端限流:在商品详情的后端系统入口层(Nginx)配置限流算法,比如Nginx的限流模块可以做到限制单位时间内所有IP的请求数量 和 限制单位时间内单个IP的请求数量。...5、订单支付阶段 订单支付阶段难点:订单支付完成,一般会由支付平台回调系统接口,更新订单状态。在支付回调成功之后,抢购系统还会通过异步通知的方式,实现订单更新之外的非核心业务处理。...实现要点: 在更新状态的同时,插入一个消息,之后再返回第三方支付操作成功的结果。 通过数据库中的消息驱动,异步推送到其他系统,完成后续的工作。

67620
领券