首页
学习
活动
专区
圈层
工具
发布

Flutter学习笔记:BottomNavigationBar实现多个Navigation

最近我研究了一下Flutter,但是在使用Navigator的时候遇到了一个很头痛的问题,就是当我们去来回切换导航按钮时,Flutter会重新build,从而导致控件重新Build,从而会失去浏览历史。...不要忘记使用WillPopScope处理Android后退导航。 想要更长更有趣的解释吗? 首先,看一下免责声明: 本文假设您熟悉Flutter中的导航。...这是我们确保使用多个导航器所需的。 我们的脚手架的身体现在是一个有三个孩子的堆栈。 每个子项都在_buildOffstageNavigator()方法中构建。...他的想法是使用Stack with Offstage来保持导航器的状态。...使用Offstage小部件可确保我们的所有导航器保留其状态,因为它们保留在控件树中。 这可能会带来一些性能损失,因此如果您选择使用它,我建议您分析您的应用。 可以在此处找到本文的完整源代码

4.9K20

干掉context进行路由管理

onTap" I/flutter (21935): Recognizer: I/flutter (21935): TapGestureRecognizer#72729 难道我们只能把home抽出成一个类来解决这个问题吗...实际上还有另一个方法,就是我们这节要讲的干掉那个上下文(context), 来进行路由管理; 分析: 上节我提到NavigatorKey是一个管理路由的Key,咋们解决方案也是用这个NavigatorKey...; 灵感来源: 我去查看Navigator源码的时候突然发现一个NavigatorState类,而且是具备Navigator的所有功能; 开始上手 首先定义一个NavigatorKey,也就是GlobalKey...全局Key,然后范型是NavigatorState: final navGK = new GlobalKeyNavigatorState>(); 然后在MaterialApp设置这个Key为navigatorKey...Key来跳转即可: push() { //导航到新路由 navGK.currentState.push( MaterialPageRoute( // MyHomePage不写参数则默认为

42010
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Flutter&Flame 游戏 - 贰贰】菜单、字体和浮层

    所以可以使用 Flutter 原生的组件来做菜单,再加上界面跳转也需要原生的路由。 其实本质上来说,Flame 所呈现的游戏界面也只是一个 Widget 而已,我们可以一视同仁。...并且这里使用 navigatorKey ,便于在无上下文的情况下,获取导航状态。...NavigatorState> navKey = GlobalKey(debugLabel: 'navKey'); static NavigatorState?...线上加载,可以使用 google_fonts 的字体库,所有的字体样式都可以通过 GoogleFonts 类通过静态方法获取,使用时会自动下载字体。...在 Flame 中展示浮层 有时我们有显示浮层的需求,比如暂停游戏时,显示暂停面板。不然用户不小心碰到了暂停键,有可能不知所措,显示一个浮层界面可以更好的引导交互。

    1.8K30

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

    感觉上它完全是打酱油的,那这到底有什么用呢?这时所有的关注焦点应该被集中到了 BuildContext 上,且听我慢慢道来。 ---- 3....可以说用户认知中的电视机,并非是真实的电视机,只是电视机功能的抽象,我们只是知道它能干什么,所有的显示、按键都是内部提供的功能接口。...现在相当于我打开电视机的外壳,让你瞟一眼内部是什么,千万不要用自己的无知来感叹这个世界的复杂。 ?...我们所使用的 XXX.of(context),都是在该上下文之上去寻找某些对象,Theme.of、Scaffold.of、Navigator.of、Provider.of、Bloc.of 都是这样的,如果你的上下文太靠前...所有 Builder 组件就是做这个事的,回调一个较下层的上下文以供使用。

    2.5K21

    Flutter中的Key详解

    虽然我们在日常的开发中极少会使用到这个key,但是实际上key的存在是很有必要的。那么key到底是什么?它有什么作用?在哪些场景下会必要要使用key呢? 接下来我们就详细聊聊key。...一般而言,上述场景中指定的Key使用ValueKey即可,参数就传某个唯一标识就行,比如id。 Key是什么 在Flutter中,Key是不能重复使用的,所以Key一般用来做唯一标识。...这时你可能会问,如果不使用Key来做唯一的标识,拿错了就拿错了呗,有什么后果吗?...没有Key的时候会发生什么 先来看个例子:一个Column布局中垂直放置两个同类型的stateful有状态组件,其中color直接作为statefulWidge的属性,而count存在于state中。...例如,现在有一个展示所有学生信息的ListView列表,每一项itemWidget所对应的学生对象均包含某个唯一的属性,例如学号、身份证号等,那么这个时候就可以使用ValueKey,其值就是对应的学号或者身份证号

    2.7K31

    大前端开发中的路由管理之五:Flutter篇

    1.2  Navigator(导航器) 管理所有的Route的Widget,实现路由导航的核心widget。...我们不需要手动创建Navigator,开发中使用的MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的,我们在需要的时候可以直接使用Navigator.of...Navigator的widget构建流程如下:  当我们想使用导航操作时,Navigator提供了如下几个常用的方法: // 路由跳转:传入一个路由对象Future push...2、Flutter路由管理实现 2.1 导航器初始化         Navigator是一个有状态的widget,NavigatorState在初始化时主要做了两件事: 根据配置参数创建初始化路由,初始化路由会放入...2.3 导航操作         前面我们了解了Navigator的初始化构建流程,对于页面栈刷新已经有了一些认识,接下来我们来看看push方法都做了些什么。

    2.6K30

    Flutter - 利用贝塞尔曲线实现添加购物车效果

    - 百度百科 它的出现为计算机矢量图形学奠定了基础,那么我们能用它做什么? 有的人说了,网上一搜一大把,这是必须的,「波浪形状」、「抛物线效果」等等等等。 ?...实现之前 在实现之前,我们还是先来理清一下思路,首先能肯定的是我们是要使用二阶贝塞尔曲线来实现「抛物线效果」。...因为起点是在 ListView 中,还会滚动,这时候可能很多小朋友就会说:“每一个 icon 都给一个 GlobalKey 不就好了嘛!” 小朋友,你确定不是在作死吗? ?...GlobalKey 使用了一个静态常量 Map 来保存它对应的 Element。你可以通过 GlobalKey 找到持有该GlobalKey的 Widget,State 和 Element。...注意:GlobalKey 是非常昂贵的,需要谨慎使用。 - Vadaski - Flutter | 深入浅出Key[3] 如果这个时候有 10000 个商品列表,岂不是要爆炸?

    3.4K20

    在 Flutter 使用 GetX 对话框

    然而,对于开发人员来说,利用上下文和构建器来培养 Dialogs 是不合适的。 在本文中,我们将探索在 Flutter 使用 GetX 的对话框。...演示模块: 这个演示视频展示了如何在 Flutter 中创建一个对话框,并展示了如何使用您的 Flutter 应用程序中的 get 包来工作,以及使用不同的属性。它会显示在你的设备上。...onWillPop, GlobalKeyNavigatorState>?...这是我对使用 GetX 进行用户交互的对话框的一个小小介绍,它正在使用 Flutter 工作。 我希望这个博客将提供您充分的信息,尝试在您的 Flutter 项目使用 GetX 对话框。...我们将向您展示介绍是什么?.使用 GetX 插件制作一个工作对话框的演示程序。在本博客中,我们已经研究了 flutter 应用程序的使用 GetX 的对话框。

    70710

    天天坐地铁的你,一定会爱上这款小程序

    王崇旭,AppSo & 知晓程序负责人: 你愿意为查地铁线路装一个 app 吗?我是不愿意的。...「查地铁」小程序与同类 app 相比,有什么优势和不足? 轻巧、用完即走是我们的优势。...比如目前还缺少图片缩放的组件,使我们在做看地铁图的时候,不得不尴尬地使用预览图片的接口来实现原生缩放。 关注微信号 zxcx0101,后台回复「缩放」,查看在小程序里实现手势缩放的技术经验。 4....线路导航是用腾讯地图的 API ,坑的话可能是在解析 API 所返回 json 里的坑吧,反正经过多次调试,坑就越填越少啦。 5. 是否有运营和推广计划?目前的用户反馈如何?...也考虑过做地铁社交,目前还在探索中。 7. 你们如何看待交通工具类小程序的发展前景? 张小龙提倡小程序用完即走,交通工具类不就完全吻合这个理念吗?

    57420

    Flutter —布局系统概述

    这次,我试图更好地理解“布局系统的工作原理”,并回答以下问题: 我的小部件的尺寸看起来不合适,怎么回事? 我只想将Widget放置在特定位置,但是没有任何属性可以控制它,为什么呢?...我一直看到诸如BoxConstraints,RenderBox和Size之类的术语。它们之间有什么关系? 对布局系统如何工作有一个大概的了解? 本文并不意味着对以上所有内容进行深入而详细的描述。...通常,您可以通过两种简单的方法来检查窗口小部件RenderBox及其属性: 通过代码执行:我们可以使用LayoutBuilder在布局系统第一阶段拦截BoxConstraints传播,并检查约束。...然后,在第二阶段完成后,我们使用键来获取小部件的RenderBox并能够检查Size,Position。...注意,max | min的宽度和高度都相等;因此,runApp使用了严格的约束-通过这样做,MyApp除了选择屏幕上的可用空间外,在选择其大小时将别无选择。 然后将约束向下传播到Widget树。

    2K20

    Flutter入门三部曲(2) - 界面开发基础

    [image.png] Flutter是受React启发的,所以Virtual Dom的diff算法也参考过来了(应该是略有修改),在diff的过程中如果节点有Key来比较的话,能够最大程度重用已有的节点...因为framework会在内部自处理它,来区分不同的widgets 下面有几种情况,我们可以使用它 - 使用ObjectKey和ValueKey来对组件进行区分。...- 使用GlobalKey 使用GlobalKey的场景是,从父控件和跨子Widget来传递状态时。 需要注意的是:不要滥用GlobalKey,如果有更好的方式的,请使用其他方式来传递状态。...还有一个场景是,过渡动画,当两个页面都是相同的Widget时,也可以使用GlobalKey。undefined总结这边文章,我们对StateFulWidget有了升入的认识。...得到了使用GlobalKey来跨子组件传递状态的方式。

    2.8K00

    双非同学,自学编程,毕业一年逆袭百度!

    组件传值方式(8 种,详见朝阳日记) EventBus 介绍,使用业务场景,和 vuex 对比,优缺点,对 EventBus 熟悉吗?...,defineProperties缺点(顺便答了vue3优化) vue3了解吗(不了解,还没开始学)为什么是用.value读值 跨域常见原因,同源策略作用,没有跨域会做什么(答了XSS攻击,CSRF攻击会更容易...(讲了三次握手,滑动窗口,慢开始,拥塞控制,超时重传,快重传) cdn原理,cdn回源怎么做(一脸懵逼,因为cdn我司分给了运维层做) 扫码登录怎么做,手机端和PC端都要建立长连接吗?...自我介绍 描述下你的优缺点 描述下你做过最难的项目思路 为什么想跳槽? 技术栈不同,有想过重构吗?难点在哪?...对自己的团队定位 遇到的业务沟通问题有什么解决方案 假如你要从百度离开,你想得到什么技能 职业规划 理想的新公司资源 如何形成自有体系的业务方法论 对百度网盘产品有什么使用建议?

    89031

    Flutter入门三部曲(2) - 界面开发基础

    image.png Flutter是受React启发的,所以Virtual Dom的diff算法也参考过来了(应该是略有修改),在diff的过程中如果节点有Key来比较的话,能够最大程度重用已有的节点...因为framework会在内部自处理它,来区分不同的widgets 下面有几种情况,我们可以使用它 - 使用ObjectKey和ValueKey来对组件进行区分。...- 使用GlobalKey 使用GlobalKey的场景是,从父控件和跨子Widget来传递状态时。 需要注意的是:不要滥用GlobalKey,如果有更好的方式的,请使用其他方式来传递状态。...还有一个场景是,过渡动画,当两个页面都是相同的Widget时,也可以使用GlobalKey。 ---- 总结 这边文章,我们对StateFulWidget有了升入的认识。...得到了使用GlobalKey来跨子组件传递状态的方式。 下一遍文章:我们将更加深入的对Flutter的界面开发的一些原理

    1.8K20

    文末送书 | 你了解强化学习吗?强化学习研究什么?

    在这样一个完整的题设下,机器人应该尽可能在没有人干预的情况下,不断根据周围的环境变化学会并判断“在什么情况下怎么做才最好”,从而一步一步完成一个完整的任务。...我想,可能已经有一些爱动脑筋的读者在心中暗暗反驳我了:这类问题一定要用强化学习来解决吗?我怎么觉得不用强化学习也能解决呢?...举例:最优路线导航 为了简化问题,假设我所在城市的道路是横平竖直的,各街区的边长相等。 ? 导航问题 外侧的边框表示城墙,车辆无法通过。中间的方块表示街区,街区和街区之间就是道路。...现在,我准备从START 处去往END 处,我需要一个“智能”的软件为我导航。这个问题难吗?...,还可以把经过每条路线所花费的时间算出来(对一条路线的时间成本做一下简单的加法运算就可以了)。

    44320

    仅需这一篇,妥妥的吃透 “ 负载均衡 ”

    负载均衡是什么 常用负载均衡策略图解 常用负载均衡策略优缺点和适用场景 用健康探测来保障高可用 结语 负载均衡是什么 ?...在软件系统中也是一样的道理,为了避免流量分摊不均,造成局部节点负载过大(如 CPU 吃紧等),所以引入一个独立的统一入口来做类似上面的“导航”的工作。...但是,软件系统中的负载均衡与导航的不同在于:导航是一个柔性策略,最终还是需要使用者做选择,而前者则不同。 怎么均衡的背后是策略在起作用,而策略的背后是由某些算法或者说逻辑来组成的。...常用负载均衡策略优缺点和适用场景 我们知道,没有完美的事物,负载均衡策略也是一样。上面列举的这些最常用的策略也有各自的优缺点和适用场景,我稍作了整理,如下。 ?...比如,可以将简单的策略组合使用、或者通过更多维度的数据采样来综合评估、甚至是基于进行数据挖掘后的预测算法来做。 用健康探测来保障高可用 不管是什么样的策略,难免会遇到机器故障或者程序故障的情况。

    59420
    领券