Flutter Popup Widget in a Provider -什么上下文将其弹出并关闭？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

根据控件位置弹出对话框

Widget孩子 return new GestureDetector( child: child, // 获取尺寸高度并打印 onTap: () => print(...context.size.height}'), ); } } 开始Demo 首先我们使用ListView.builder来创建很多靠右的按钮，不写itemCount就是无限循环的，然后这些按钮就是我们的点击事件按钮，负责弹出对话框的...类，Popup类接收一个上下文context，用来获取点击的控件的位置， OnItem就是我们的自定义类型声明回调，传了个String类型的值回去给上级接收，这个String类型的值就是赞或评论： //...button button = widget.btnContext.findRenderObject(); // 找到并渲染对象overlay overlay = Overlay.of...button button = widget.btnContext.findRenderObject(); // 找到并渲染对象overlay overlay = Overlay.of

2.5K3 0

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

和尚在去年刚接触 Flutter 时学习了一下页面跳转路由的基本用法，随着逐渐的学习和场景的使用，对一些特殊场景下路由使用进行尝试； Pop / Push pushReplacementNamed...popAndPushNamed popAndPushNamed 可以将本页面销毁并打开新的页面，旧的页面会被销毁；如 A -> B -> C 在 B 页面采用 popAndPushNamed...，在调用 popUntil 时给一个 Provider 赋值，在到达目的页面时获取 Provider 内容；有需要可以参考和整理的 Provider 基本用法； ?...this.opaque = true, // 完成路由后是否遮盖底部页面 this.barrierDismissible = false, // 是否可以通过点击遮挡屏障关闭路由...> secondaryAnimation, Widget child); 和尚实现一个简单的对话框：由底部弹出且透明度由 0.0 到 1.0；但和尚在测试时 barrierColor

1.9K4 1

您找到你想要的搜索结果了吗？

是的

没有找到

Flutter for OpenHarmony前置知识《Flutter 状态管理入门实战：使用 Provider 构建计数器应用》

本文将通过一个简洁但完整的“计数器”示例，深入讲解如何使用官方推荐的状态管理方案 —— Provider，实现数据驱动 UI 更新。一、为什么选择 Provider？...Widget）与 Flutter 框架深度集成，社区支持广泛二、项目结构概览整个应用包含四个核心部分：状态模型（CounterModel）：管理计数逻辑应用入口（main 函数）：注入状态到...create 回调在此处创建 CounterModel 实例，并将其“注入”到 Widget 树中。整个 App 的子组件都可以通过 Provider.of 或 Consumer 访问它。...final counter = Provider.of(context); 这行代码从上下文中获取 CounterModel 实例。...从 Provider 入手，是你迈向 Flutter 高阶开发的重要一步。

2000 0

Flutter 移动端架构实践：Widget-Async-Bloc-Service

原文链接：https://medium.com/coding-with-flutter/widget-async-bloc-service-a-practical-architecture-for-flutter-apps...我对状态管理和app架构的看法过去的一年中，我构建了若干大大小小的Flutter app，期间我遇到并解决了许多问题，这让我明白了状态管理没有银弹。...将其聚集在一起：使用Provider包一旦我们定义了BLoC和Service，我们就需要将其与控件相关联。这段时间以来，我一直在使用 Remi Rousselet 的 Provider 包。...控件是如何对可选的dispose回调进行配置的，我们使用它来处理BLoC并关闭相应的StreamControllers。...登录成功或失败后，我们重新启用所有按钮并恢复标题的内容，我们通过设置loading=false达到该效果。登录失败时，我们会弹出一个警示的对话框。

20.8K2 0

Flutter 组件 | Builder 构造器与 BuildContext 认知

而用户，便是使用 Flutter 框架的我们。我们在使用时，不需要了解电视机( Element )内部做了什么，只需要知道如何使用（BuildContext ）即可。...我们所使用的 XXX.of(context)，都是在该上下文之上去寻找某些对象，Theme.of、Scaffold.of、Navigator.of、Provider.of、Bloc.of 都是这样的，如果你的上下文太靠前...这一点本质上和提取出一个 Widget 没什么两样，如果很简单的东西，不想提出一个组件来处理，那 Builder 就是一个很好的帮手。...比如下面的示例，Scaffold 在 BuilderDemo#build 下，这是想在 floatingActionButton 单击时弹出 SnackBar ，而 showSnackBar 是需要 ScaffoldState...import 'package:flutter/material.dart'; class BuilderDemo extends StatelessWidget { @override Widget

2.7K2 1

flutter中的响应式布局

下面我们就来看看在flutter中是如何实现的吧！我们将实现如下的简单功能：点击左上角icon打开（点击返回按钮关闭）. 根据手势来关闭或打开drawer....在手机上我们通过flutter的Flutter Drawer widget实现，而在PC上我们就不需要使用Drawer，直接显示所有菜单即可....pageName: pageName, ), ], ), ); } } 在build()中我们ref.watch用来获取所选页面名称，并将其作为参数传递给...我们需要定义一个新的provider： final selectedPageBuilderProvider = Provider((ref) { // watch for...通过这些更改，我们可以在移动设备上运行该应用程序，查看菜单Icon，并使用它打开drawer。

3.7K1 0

一文带你深入分析Flutter Widget

'package:provider/provider.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget...context) { } build 方法接收一个BuildContext 参数，它提供了与当前 Widget 相关的上下文信息，例如父级 Widget 的信息、主题数据等。...build 方法的作用是根据当前的状态（State）和输入属性（Properties）构建并返回一个 Widget 树。这个 Widget 树描述了界面的结构和外观。...Flutter 框架会根据这个 Widget 树来绘制界面，并在需要时进行重建和更新。...// 在这里构建并返回复杂的 Widget 树 }, ); }

5442 0

Flutter 中使用 Riverpod 进行高效的 UI 状态管理

Flutter 提供了多种状态管理方式，如 setState、InheritedWidget、Provider、Bloc 等，每种方式都有其适用的场景和优缺点。...Riverpod 是什么？Riverpod 是一个功能强大的 Flutter 状态管理库，由 Provider 的作者 Remi Rousselet 开发。...Riverpod 的优势无依赖上下文：Riverpod 不再依赖于 BuildContext，可以在任何位置读取和监听状态。提高类型安全性：通过更加充分地利用 Dart 的类型系统，减少运行时错误。...包装根 Widget在 main.dart 中使用 ProviderScope 包装您的应用，这将为 Riverpod 提供一个范围：import 'package:flutter/material.dart...构建 UI 并使用状态在 Widget 中，我们可以使用 ConsumerWidget 来访问和更新状态：class CounterWidget extends ConsumerWidget { const

1.4K1 0

Flutter技术与实战(5)

混合导航栈从Flutter页面跳转至原生页面为什么需要做状态管理，怎么做 Provider 放在那儿完成数据读写操作 Consumer 多状态的资源封装如何封装实现注入获取资源思考...在下面的代码中，我们先是读取并打印了计数器数据，随后将其递增，并再次把它读取打印。...然后，打开 main.dart 文件，将其逻辑更新为以下代码逻辑，即一个写着“Hello from Flutter”的全屏红色的 Flutter Widget。...5、Widget 重建。在确认 Dart VM 资源加载成功后，Flutter 会将其 UI 线程重置，通知 Flutter Framework 重建 Widget。...文件，在右键弹出的菜单中选择“Run ‘tests in widget_test’”，就可以启动测试用例了。

17.3K3 0

干货 | 携程火车票Flutter最佳实践

一、为什么选择Flutter 携程在已经引入了 React Native 的情况下，为什么还会选择 Flutter？更多是对性能的考虑。开发效率与性能体验就像天平两端，需要找到一个平衡点。...2.1 为什么需要使用Provider 如果状态是该组件私有的，则应该由组件自己管理；但是如果状态要跨组件共享，则该状态应该由各个组件共同的父元素来管理。...我们在根Widget继承了InheritedWidget，然后在该组件中存放一个数据data，那么可以在任意子Widget中来获取该组件的数据并使用。...build(BuildContext context) { ///使用Provider包装以后，可以在widget的任一一个子widget获取共享数据并操作数据，在这里就是可以在HotelListView...Widget build(BuildContext context) { ///使用Provider包装以后，可以在widget的任一一个子widget获取共享数据并操作数据，在这里就是可以在ListView

3K3 0

Flutter如何状态管理

#### 目录介绍 - 01.什么是状态管理 - 02.状态管理方案分类 - 03.状态管理使用场景 - 04.Widget管理自己的状态 - 05.Widget管理子Widget状态 - 06.简单混合管理状态.../YCFlutterUtils - flutter 混合项目代码案例：https://github.com/yangchong211/YCHybridFlutte ### 01.什么是状态管理 -...Widget来说，管理状态并告诉其子Widget何时更新通常是比较好的方式。...Provider 会监听 Value 的变化而更新整个 context 上下文，因此如果 build 方法返回的 Widget 过大过于复杂的话，刷新的成本是非常高的。...是 Provider 的另一种取值方式 - Consumer 可以直接拿到 context 连带 Value 一并传作为参数传递给 builder ，使用无疑更加方便和直观，大大降低了开发人员对于控制刷新范围的工作成本

1.4K1 0

flutter路由

路由管理控制路由是一个应用程序抽象的屏幕或页面；路由管理就是管理页面之间如何跳转；路由入栈指打开一个新页面；路由出栈指一个页面关闭操作；路由管理指如何来管理路由栈； Navigator是一个管理路由的...maybePop 导航器是否可以弹出，可以的话弹出 pop 弹出路由 popUntil 一直弹出直到指定路由 removeRoute 删除指定路由 removeRouteBelow 立即从导航器中删除一条路由...): Handler: "onTap" I/flutter (21935): Recognizer: I/flutter (21935): TapGestureRecognizer#72729 这个报错是因为用的这个上下文是...MaterialApp的，这个上下文不包含Navigator导航器操作，所以我们应该把home的那部分抽出来放另一个类；路由传值并返回值路由传参在上面那个例子已经有了，num就是我们的参数，然后显示在标题上就是使用了...这节教大家路由传值并返回值，创建个NewPage，接收个文本值text，然后显示在新页面，新页面给个返回按钮，点击返回按钮返回并带回一串值回去。

2.3K2 0

从零开始的Flutter之旅: Provider

分析首先我们来分析下为什么会导致父widget的重新build。...这种方式统一定义为Provider，其实Flutter内部已经有Provider的完整实现，不过我们为了学习这种解决方法的思想，自己来实现一个简易版的Provider。...其它的widget都没有变化。这样就解决了开篇提到的疑问，达到了widget刷新的最小化。以上是一个简单的Provider-Consumer的使用。Flutter对这一块有更完善的实现方案。...但是经过我们这一轮分析，你再去看Flutter中Provider的源码将会更加简单易懂。...如果你想了解Flutter中Provider的使用，你可以通过flutter_github来了解它的具体实战使用技巧。想要查看Provider实战技巧，需要将分支切换到sample_provider

9032 0

Fluttr组件ValueListenableBuilder

title: "Fluttr组件ValueListenableBuilder" date: 2021-08-16T08:48:19+08:00 draft: false tags: ["flutter"...] categories: ["flutter"] 该Widget的显示内容会与ValueListenable保持同步，ValueListenable是dart的接口，该接口用于保持value变化的监听者...:上下文 //value：变化的值，我们就是根据这个value实现了数据内容同步， //child:该参数并不常用。...通信'), ), body: Center( child: ValueListenableBuilder( ///为什么要用ValueNotifier...Provider除了监听变化之外，还增加了拦截、多value，子获取祖先value等功能。

3502 0

【源码篇】Flutter Bloc背后的思想，一篇纠结的文章

这里我证实下：这是真的，Bloc确实将Provider封了一层但是仅仅只用到Provider中子节点查询最近父节点InheritedElement数据和顶层Widget并列布局功能，Provider最经典的刷新机制...痛苦之后便是一种巨大的满足感，并对Provider熟练运用Framework层各种api，然后实现了精彩的刷新机制，感到赞叹！...中，最终是储存在 _InheritedProviderScopeElement中， _startListening也是Provider的内容这内部的原理是比较复杂且很重要的，感兴趣请查看：源码篇：Flutter...Provider的另一面（万字图文+插件）说真的 _startListening里面的逻辑没什么卵用 markNeedsNotifyDependents这个api是Provider作者专门为Provider...，可能需要你清下浏览器缓存 Windows：Windows平台安装包密码：xdd666 系列文章源码篇：Flutter Provider的另一面（万字图文+插件）源码篇：Handler那些事（万字图文

2.9K4 1

为啥Flutter Hooks没有受到太多关注和青睐？

Flutter Hooks 虽然面世已经有一段时间了，但是迄今为止它并没有受到太多关注和青睐。我很奇怪为什么会是这个样子，毕竟它真的很好用！...在本文中，我会试着告诉大家如何使用 Flutter Hooks 来减少样板代码，并基本上摆脱你现在用的几乎所有有状态小部件（StatefulWidget），让大家知道 Hooks 用起来是多么简单利落！...什么是 Hooks，它又是从何而来的？总不会是无名氏发明的吧？其实 Hooks 最初是源于 React，但这里我并不会谈什么 React，因为我没用过它，以后也应该不会用的。...由于 Hook 函数非常易于使用，因此我不需要将其作为一个类来实现，不过这里还是展示一下具体的做法。...当你的 Hooks 的复杂度增长时，就应将其作为一个类来实现；实际上，这个包的文档就是这样建议的。

1.5K2 0

从零开始学 Flutter：状态管理入门之 setState 与 Provider

本文将从零开始，带你理解状态管理的核心意义，掌握 setState 与 Provider 的基础用法，并理清两者的适用场景。一、先搞懂：什么是“状态”？...比如：按钮点击后显示的“已点击”/“未点击”文本；输入框中用户输入的内容；列表加载完成后展示的数据列表；开关组件的“开启”/“关闭”状态。...步骤 1：添加 Provider 依赖首先在 pubspec.yaml 文件中添加 Provider 依赖（注意查看最新版本）： dependencies: flutter: sdk: flutter...provider: ^6.1.1 # 添加 Provider 依赖添加后执行 flutter pub get 安装依赖。...: flutter: sdk: flutter provider: ^6.1.1 # 添加 Provider 依赖步骤 3：用 Provider 包裹根组件，提供状态在应用的根组件外层包裹

2831 0

Flutter完整开发实战详解(十五、全面理解State与Provider)

本篇将带你深入理解 Flutter 中 State 的工作机制，并通过对状态管理框架 Provider 解析加深理解，看完这一篇你将更轻松的理解你的 “State 大后宫” 。...一、State 1、State 是什么？我们知道 Flutter 宇宙中万物皆 Widget ，而 Widget 是 @immutable 即不可变的，所以每个 Widget 状态都代表了一帧。...这就涉及 Flutter 中 Widget 的实现原理，在之前的篇章我们介绍过，这里我们说两个涉及的概念： Flutter 中的 Widget 在一般情况下，是需要通过 Element 转化为 RenderObject...噢，是的，InheritedWidget 共享的是 Widget ，只是这个 Widget 是一个 ProxyWidget ，它自己本身并不绘制什么，但共享这个 Widget 内保存有的值，却达到了共享状态的目的...下面开始实际分析 Provider 。二、Provider 为什么会有 Provider ？

4.2K2 1

【Flutter 专题】47 图解新的状态管理 Provider (二)

: (_) => User('Flutter', 0), child: MaterialApp( title: 'Flutter Demo',...StatelessWidget { @override Widget build(BuildContext context) { final user = Provider.of<User...} } ValueListenableProvider 方式使用 ValueListenableProvider 方式时要注意，需要绑定的数据要继承自 ValueNotifier，并实现其构造方法...context) { final number = Provider.of(context); final person = Provider.of(context...ChangeNotifier {} class Person extends ValueNotifier {} 无论使用那种 .value 方式，均建议在 dispose 中进行 listener 的关闭

1.8K3 1

【源码篇】Flutter Provider的另一面（万字图文+插件）

flutter provider，第一个，看图上红框标定的就是了，点击install安装即可 [image-20210521161541895] 来下看使用效果图 [provider] 如果你不喜欢这种命名方式...这个方法中，将其提出来，单独赋值给了一个变量，方便后续使用插件生成代码插件生成代码分为俩个模式：Default和High 默认模式有俩个文件（Default）：view、provider 高级模式有三个文件...{ } High：高级模式下的模板代码 view import 'package:flutter/material.dart'; import 'package:provider/provider.dart...在此处将其理解为：本身Widget和其子节点形成的树，Element是这棵树的头结点，这特定位置的节点是实例化的，对这个特定位置的实例节点操作，会影响到他的子节点 Widget的createElement...相关地址文章中Demo的Github地址：flutter_use Web效果：https://cnad666.github.io/flutter_use/web/index.html 如果provider

1.8K6 1

点击加载更多

根据控件位置弹出对话框

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

Flutter for OpenHarmony前置知识《Flutter 状态管理入门实战：使用 Provider 构建计数器应用》

Flutter 移动端架构实践：Widget-Async-Bloc-Service

Flutter 组件 | Builder 构造器与 BuildContext 认知

flutter中的响应式布局

一文带你深入分析Flutter Widget

Flutter 中使用 Riverpod 进行高效的 UI 状态管理

Flutter技术与实战(5)

干货 | 携程火车票Flutter最佳实践

Flutter如何状态管理

flutter路由

从零开始的Flutter之旅: Provider

Fluttr组件ValueListenableBuilder

【源码篇】Flutter Bloc背后的思想，一篇纠结的文章

为啥Flutter Hooks没有受到太多关注和青睐？

从零开始学 Flutter：状态管理入门之 setState 与 Provider

Flutter完整开发实战详解(十五、全面理解State与Provider)

【Flutter 专题】47 图解新的状态管理 Provider (二)

【源码篇】Flutter Provider的另一面（万字图文+插件）

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐