文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Flutter 在哈啰出行 B 端创新业务的实践

架构 1.0 的建设 架构建设方面，我们需要解决的三个主要问题： 页面模块化 页面间通信 页面栈管理 在解决这三个问题的过程中，我们大致经历了从 架构 1.0 到 架构 2.0，除了页面模块化基本保持不变...如何划分模块这可能需要另外一篇文章来说明，简单来说就是业务域的划分。要保持模块的内聚，每个模块的初始化需要独立进行，要做到这点，我们的方案是将所有模块挂载到模块树上，类似文件夹的树形结构。...架构 1.0 时提供的页面间通信解决方案，后面会讲到我们在进行架构升级之后提供的更轻量级的解决方案。...中 ，这直接导致每打开一个 Flutter 页面的内存占用高出 10M 左右。...架构 2.0 的优势 在我们的业务上存在很多模块，进去之后是，首页 -> 列表页 -> 详情页 -> 处理页 -> 结果页，大致会是连续打开 5 个 Flutter 页面的场景。

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

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

    路由保持状态 在开发Flutter应用时，有时我们希望保持页面状态，避免页面重建，特别是在页面间切换时。这种情况下，我们可以使用路由保持状态的技术来实现。...本节将探讨如何在Flutter中保持页面状态，并演示使用AutomaticKeepAliveClientMixin和KeepAlive来实现路由保持状态的方法。 1....路由保持状态是一种优化技术，用于在页面切换时保持页面状态不变，避免页面重建。...在Flutter应用中实现导航器嵌套： 要实现导航器嵌套，我们可以在一个页面的Widget树中嵌套多个Navigator小部件，并为每个Navigator指定不同的 GlobalKey 以管理其导航状态...注意页面状态保存和恢复： 在使用路由保持状态技术时，应该注意页面状态的保存和恢复，避免出现数据丢失或页面状态错乱的情况。可以通过重写页面的dispose方法来释放资源和保存页面状态。

    4.6K20

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

    , 要与 PageView 中的页面顺序必须保持一致 /// 个数个顺序都要保持一致 items: datas.map((data) { return...主动设置选中状态 : 在 BottomNavigationBar 的 onTap 参数中 , 可以获取点击的按钮索引 , 然后调用 PageView 的 PageController 的 jumpToPage...: 在 BottomNavigationBar 底部导航栏中点击导航按钮 , 切换页面 , 使用 PageView 的 PageController 的 jumpToPage 方法进行页面跳转 ; PageView...主动设置选中状态 : 滑动 PageView 界面 , 会回调 PageView 中的 onPageChanged 方法 , 在此处调用 setState 方法 , 在该方法中设置 _currentIndex..., 要与 PageView 中的页面顺序必须保持一致 /// 个数个顺序都要保持一致 items: datas.map((data) { return

    6.9K20

    Flutter 零基础入门（四十）：TabBar 与底部导航栏 —— 多页面切换与布局技巧

    在 BottomNavigationBar 多页面切换中，如果每个页面都是 StatefulWidget，默认会被重新创建。...底部导航 页面多且切换，保持状态建议用 IndexedStack 结合使用也很常见： 顶部 TabBar → 分类切换 底部 BottomNavigationBar → 主模块切换 四、完整示例：...IndexedStack 保持状态 五、常见坑 ❌ BottomNavigationBar 切换时页面被重建 → 状态丢失 ❌ TabBar 未用 DefaultTabController → 无法切换...❌ body / TabBarView 内容与 tabs 数量不匹配 → 报错 ❌ 使用 StatefulWidget 嵌套时未注意 key → 状态错乱 六、本篇你真正掌握了什么？...到这里为止： 你的 Flutter App 已经具备完整的多页面框架能力 ✅ 七、一句话总结 TabBar 顶部切分类 BottomNavigationBar 底部切模块 IndexedStack 保持页面状态

    11110

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

    作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的..._tabItems 中，监听每个 TabBarItem 的点击，通过 _pageController 实现PageView的状态同步。  ...也就是你可以通过 Navigator 的 pop 时返回参数，之后在 Future 中可以的监听中处理页面的返回结果。...大家都知道在 Flutter 中 ，是通过实现 State 与 setState 来渲染和改变 StatefulWidget 的。如果使用了flutter_redux 会有怎样的效果？  ...更多 Redux 的详细就不再展开，接下来我们讲讲 flutter_redux 的使用。在 redux 中主要引入了 action、reducer、store 概念。

    5.8K30

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

    作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的..._tabItems 中，监听每个 TabBarItem 的点击，通过 _pageController 实现PageView的状态同步。  ...也就是你可以通过 Navigator 的 pop 时返回参数，之后在 Future 中可以的监听中处理页面的返回结果。...大家都知道在 Flutter 中 ，是通过实现 State 与 setState 来渲染和改变 StatefulWidget 的。如果使用了flutter_redux 会有怎样的效果？  ...更多 Redux 的详细就不再展开，接下来我们讲讲 flutter_redux 的使用。在 redux 中主要引入了 action、reducer、store 概念。

    6.2K10

    Flutter开发实战分析-animation_demo解析导读

    image.png pinned为true 因为我们的头部是最后还是粘性在上面的，所以设置SliverPersistentHeader的pined为true ---- 单页内滑动时的动画效果 ?...确定中间状态 tColumnToRow 整体的动画，在Flutter中有很方便的lerp函数可以确定中间的状态。只要传入我们进度的百分比就可以。这个百分比可以由滑动的过程中的offset传入。...同时，单页内滑动效果，也需要确定当前选中的那个位置。 滑动事件的监听NotificationListener Flutter中滑动的组件，都会发送出自己的Notification。...PageView 因为上下都是PageView,当单页内的动画在初始状态和结束状态（中间）中间。是不能切换PageView的。当高度小于时，才能切换。 监听滑动的距离 ?...另个就是会去搭建真实的项目，看看如何写一个Reactive 的Flutter项目。

    2.8K30

    Flutter 动画篇 (Hero 动画)

    使用 hero 动画可以在页面转换时将用户的注意力集中在这些关键元素上，强调其重要性，引导用户进一步了解相关信息。...保持界面的一致性 这种动画效果使得不同页面之间在元素过渡上保持一种统一的风格，不会让用户在页面跳转时感到突兀，有助于维护整个应用界面的一致性和整体性。...效果: 仔细观察 我们就能看到 图片从外边到另外一个页面时,发生大小的变化 以及位置的偏移. 我们要实现起来也是非常的容易, 在这里我不讲 原理,只讲解如何使用的....图形表示：通常是一个更大的图形，表示动画结束时的状态。...动画执行：在动画过程中，两个页面的 Hero 在叠加层中进行平滑过渡，给用户一种元素在页面之间移动的感觉。

    93410

    使用CodeBuddy 辅助 Flutter 跨端开发

    今天记录一下使用CodeBuddy辅助Flutter跨端开发。我们都知道，在 Flutter 跨端开发中，实现一个兼容多平台的组件往往需要处理不同操作系统的特性差异。...这里我就用ai辅助开发，尽量在 3 小时内完成一个支持自动轮播、手势滑动且适配 iOS（iPhone 12+）和 Android（Android 11+）的轮播图组件开发，并解决开发过程中遇到的典型适配问题...提问 CodeBuddy： Flutter 轮播图在 iOS 顶部有空白，Android 正常，如何解决？ AI 解决方案： iOS 设备默认使用 SafeArea 避免状态栏遮挡，建议： 1....Android 滑动卡顿优化 问题现象：在小米 13 真机测试时，手势滑动切换图片时有明显卡顿。...提问 CodeBuddy： Flutter carousel_slider 在 Android 设备滑动卡顿，如何优化？ AI 解决方案： 1.

    39510

    Android开发者的Flutter入门（二）

    涉及到的有以下这些点： 闪屏页 自定义布局 下拉刷新 上拉加载更多 使用Assets 路由（页面跳转） 内嵌WebView 闪屏页 由于启动Flutter app的时候需要初始化Flutter...那段注释的大概意思是说这个标签是用来表示让Flutter在启动过程中保持闪屏页直到第一帧画面被绘制出来。也就是说，闪屏页的隐藏不需要我们来处理了。 接下来看看这个LaunchTheme: ?...controller: _controller)); 在创建列表的时候我们给列表长度加1，当要获取最后一项时返回加载更多的控件，同时还要通过controller监测列表滚动状态...上拉加载更多 使用Assets 添加 Assets 在Flutter中如果你有图片等文件需要引入到app中，都需要使用Assets, 这个Assets的概念不同于Android中Assets的概念，某种意义上讲...路由（页面跳转） Android中我们都是用startActivity或者第三方路由库来做页面跳转，在Flutter中，使用内置的Navigator来做跳转的。

    1.9K20

    干货 | 携程度假无线前端架构演进之路

    在开发时，运行 gulp 命令即可。 通过上述取巧的方式，我们在团队中成功推广了 ES6 和 React 开发模式。...4）既是多页应用，也是单页应用，还可以通过配置自由切换两种模式，用「同构应用」打破「单页 VS 多页」的两难抉择 5）构建时可以生成一份 hash history 模式的静态文件，当做普通单页应用的入口文件...对于页面的开发者来说，他们在大部分场景下，不需要考虑对 SSR 的适配。...3）Flutter 的功能主要覆盖的是渲染引擎，在实际业务开发时，IOS/Android/Web 各个平台特定的 API 还需要去额外适配，并非 100% 使用 Flutter 自身功能就能解决一切问题...那么，View 层里存在的相当一部分代码，比如组件结构堆叠、状态绑定、事件绑定等，都可以提取出来，在多端复用。在每个端启动时，注入不同的组件实现即可。

    2.8K30

    Flutter 1.22 正式发布

    在Flutter 1.22版中，我们预览了使用Flutter构建的App Clip目标。 ? 有关如何使用Flutter构建Clip的更多详细信息，请查看flutter.dev上的文档。...如果您想使用平台视图在iOS或Android上托管自己的本机UI组件，则可以了解如何在使用平台视图在Flutter应用中托管本机Android和iOS视图上。...管理同一页面的不同排列之间的嵌套路由也极其困难。 Navigator 2.0通过使页面堆栈可见而解决了这些问题，甚至更多。...尽管我们很高兴将状态恢复的预览版放在您的手中，但还有更多工作要做。例如，状态恢复不仅适用于Android，iOS应用程序也可以受益。此外，我们正在忙于更新自己的窗口小部件，以在恢复过程中保持其状态。...EasyA联合创始人Phil Kwok 重大变化 与往常一样，我们试图将重大更改的数量保持在最少。以下是Flutter 1.22版本中的列表。

    10.2K20

    慕课甄选-Flutter零基础极速入门到进阶实战

    （零基础的 “避坑指南”）零基础学 Flutter，最怕 “走弯路”—— 比如先啃完厚达 500 页的《Flutter 实战》再动手，结果理论记满脑子，写代码时仍无从下手；或跟着零散视频学，学会了 “按钮组件...，立即做 “个人中心卡片”“登录表单” 等小案例，每个案例都拆解 “组件嵌套逻辑”“布局适配技巧”，让组件知识直接落地痛点 3：跨端适配 “踩坑无数”开发时只在模拟器调试，真机运行时出现 “iOS 按钮偏左...”，避免 “Provider 嵌套过深” 的问题；▶ 实战案例：开发 “用户登录系统”，实现 “登录成功后保存用户信息到 GetX 全局状态，所有页面可获取用户名；退出登录时清除状态，自动跳转回登录页”...，简历上比 “只学过语法” 的竞争者更有优势；理解 “跨端开发思维”，知道 “如何适配双端”“如何处理企业常见问题”（如 token 过期、网络错误），面试时能讲清 “项目架构”“技术选型理由”。...“如何优化 Flutter APP 性能？”）。

    52510

    Flutter实战 | 从 0 搭建「网易云音乐」APP（九、搜索页面、底部播放控制栏）

    搜索结果页 搜索结果页其实是和「搜索页」在一起的，由搜索状态控制： _isSearching ?...UI，所以我们在写「综合」页面的时候每一个控件都封装一下。...具体UI上面就不说了，有一个需要注意的地方就是： 在综合页面需要跳转别的页面，这里我使用的是在创建「综合」页面的时候传入点击事件，然后在点击的时候调用： SearchMultipleResultPage...so，控制栏逻辑如下： 1.在播放的时候保存当前歌曲列表和当前 index 到本地2.在重新打开 APP 的时候点击播放可以播放上次播放的歌曲 第一个保存，很简单了，使用 shared_preferences...写好以后在需要使用的页面加上就行了。

    2.9K10

    干货 | 携程酒店Flutter性能优化实践

    一 、前言 携程酒店业务使用Flutter技术开发的时间快接近两年，这期间有列表页、详情页、相册页等页面使用了Flutter技术栈进行了跨平台整合，大大提高了研发效率。...图5 酒店详情页周边内容运用懒加载减少构建次数 f) 分帧渲染 错峰加载方案使用分帧渲染，分帧渲染的原理是将一棵Widget树中的部分绘制时间较长的节点在第一帧时只占位不绘制，等到下一帧开始时，节点替换占位...预加载数据有三种常见方法，第二个页面的数据在第一个页面的服务结果中获得；第二个页面的数据在客户端其它页面中预先获得并缓存；第二个页面的服务请求在打开页面之前发送。...我们的框架也利用此方法监控了我们app中的每个页面是否在退出时还存在泄漏。 另外通过Flutter的Dev tool中的内存监控工具也能实现对泄漏对象的发现。...b) 一些观察者模式中的订阅者在页面退出时没有取消订阅 这种是大家比较熟悉的一种情况。

    2.5K10

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

    随之而来的问题就是，组件之间怎么相互通讯，比如变更了登录态，如何通知其他模块刷新？ 推荐使用Provider来管理各个组件的状态，我们实践下来 ，主体布局采用MVVM模式是比较方便做模块化编程的。...我们在根Widget继承了InheritedWidget，然后在该组件中存放一个数据data，那么可以在任意子Widget中来获取该组件的数据并使用。...3）在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化代码逻辑，降低出错的概率，提高开发效率。...针对这种情况我们对将要加载的图片进行预加载处理，比如列表页在分页请求数据回来的时候做图片预加载。还有，下一个页面的图片，需要一进去就有图片直接显示，就可以在当前页面做图片预加载。 ?...///请求列表数据数据 void loadListData(HotelQuery query) { ///在首页提前获取列表页的数据并缓存到本地，当用户进入列表页时可以直接展示数据 if (resultModel

    3K30

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

    那么如何让页面保持原来的状态，而不是每次都要重新加载刷新数据呢？有两种方式。...第一种方式：采用IndexdStack IndexdStack和Stack一样，都是层布局控件，可以在一个控件上面放置另一个控件，但唯一不同的是，IndexdStack在同一时刻只能显示子控件中的一个控件..._pages, ), 这样就能够实现保持页面状态了，效果如下： 我们可以看到，此时，页面的数据只在最开始进来的时候进行加载，然后就保持住这个页面的状态了，并不会每次进来都进行数据的加载刷新了...使用IndexedStack来保持页面状态的优点就是配置简单，但是它也有很大的缺点：IndexedStack中管理的子页面在一开始就全部一次性加载出来了，不管有没有显示出来，然后通过index属性来确定到底显示哪一个页面...，页面数据只在首次进入该页面的时候进行刷新；而其他没有实现页面保持的页面在每次进入该页面的时候，数据都会刷新。

    7K20

    Flutter 零基础入门：从环境搭建到第一个跨平台应用

    第二章：Flutter 核心概念快速理解 在开发第一个应用前，先掌握几个 Flutter 的核心概念，避免后续开发中迷茫： 2.1 Dart 语言：Flutter 的“灵魂” Flutter 是基于 Dart...，无需重启应用；AOT 用于发布时编译为原生机器码，提升性能； 入口函数：每个 Dart 程序的入口是 main() 函数。...使用方法：修改代码后，点击开发工具中的“Hot Reload”按钮（或按快捷键 Ctrl+S/Command+S）即可。...3.5 尝试热重载 保持应用在运行状态； 修改代码中的文本内容，例如将 _message = "Hello Flutter!" 改为 _message = "Hello World!"...后续遇到问题时，可以参考 Flutter 官方文档 或社区资源（如 Stack Overflow、掘金、知乎），祝你在 Flutter 跨平台开发的道路上越走越远！

    50510

    轻松 Flutter 入门，秒变大前端

    APP中提供一个Webview使用H5页面的Http直连。APP和H5可以相互独立开发，JS使用Bridge与原生进行数据通信，显示界面依赖Webview的浏览器渲染。...因为使用Dart做AOT编译成原生，自然也比使用解释性的JS在V8引擎中执行性能更快，并且因为去掉Bridge，没有了繁琐的数据通信和交互，性能就更前进了一步。...此时，就需要使用使用带状态的StatefulWidget了 5.6 给页面加上状态 给自己一个需求，按钮点击时，修改页面上显示的文字“Hello World” 变成“You Click Me” import...使用过小程序的同学在这点上应该有体会，在小程序的官方文档中，会强烈建议减少setData的使用频率，以避免性能的下降。...6.3 路由传参 列表页跳转到详情页，需要路由传参，这个在flutter体系里，又是怎么做的呢？

    4.9K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券