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

根据控件位置弹出对话框

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

1.9K30

【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.7K41
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    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.3K21

    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达到该效果。 登录失败时,我们会弹出一个警示的对话框。

    16.1K20

    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 ,使用无疑更加方便和直观,大大降低了开发人员对于控制刷新范围的工作成本

    1K10

    干货 | 携程火车票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

    2.2K30

    flutter路由

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

    1.7K20

    从零开始的Flutter之旅: Provider

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

    74420

    【源码篇】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.4K41

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

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

    1.2K20

    【源码篇】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.5K61

    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 ?

    3.7K21

    带你快速掌握Flutter图片开发核心技能

    本文学习过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助; 欢迎加入课程官方群:795410523 和讲师以及其他师兄弟们一起学习交流; 目录 什么是Image widget...什么是Image widget? Flutter中一个用来展示图片的widget。...; new Image.memory - 用于从Uint8List获取图像; 在加载项目中的图片资源时,为了让Image能够根据像素密度自动适配不同分辨率的图片,请使用AssetImage指定图像,并确保在...插件; 第二步:导入头文件 import 'dart:io'; import 'package:path_provider/path_provider.dart'; //Image.file(File...在Flutter中我们可以借助cached_network_image插件,来从网络上加载图片,并且将其缓存到本地,以供下次使用。

    1.5K10

    Flutter Provider 使用指南详解

    Flutter Provider是一个流行的状态管理解决方案,它提供了一种简单而强大的方式来管理Flutter应用程序中的状态。 什么是Flutter Provider?...为什么选择使用Provider? 选择使用Provider有以下几个重要原因: 简单易用:Provider提供了一种简单的API,使得状态管理变得非常容易。...通过使用 Provider,您可以避免手动传递数据模型,使得状态管理变得更加简单和高效。 Provider 是什么? Provider 是一个用于管理和共享状态的 Flutter 库。...Provider 的使用方法 一旦您在 Flutter 项目中集成了 Provider,并创建了您的数据模型,您就可以开始使用 Provider 来管理和共享状态。...总结 在本文中,我们详细介绍了 Flutter 中的状态管理工具 Provider,并展示了如何使用 Provider 构建一个简单的购物车应用。

    1.8K20
    领券