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

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

一、 为什么选择Flutter 携程在已经引入了 React Native 的情况下，为什么还会选择 Flutter？更多是对性能的考虑。开发效率与性能体验就像天平两端，需要找到一个平衡点。...RN 能够满足我们绝大部分的业务，并且热更、版本控制都很灵活。但是在复杂页面上，特别是在长列表的渲染上，还是存在一定的问题，促使我们去尝试一些新的解决方案。...控制在只在头图可见的情况下面触发setStat()，避免不必要的页面滑动触发刷新。...如上图所示在列表中 Item 中存在大量的倒计时。一定要控制刷新倒计时只影响控件本身，并且只有可视的区域视图是在刷新的，不可见的情况下及时销毁计时器。一直刷整个列表，性能开销是恐怖的。...4.2 Flutter 数据预加载 为了缩短用户的加载等待时长，我们经常需要一些预加载方法。比如在前一个页面预加载下一个页面的数据，或者在长列表的分页请求时候，可以做分页预加载。

3K30

Flutter 3.7更新详解

性能页面也有一些值得注意的新功能，该页面现在在顶部新增了 Frame Analysis (帧分析) 选项卡，它能够提供在 Flutter 中详细追踪大量消耗的某些帧和操作的一些建议。...图片 滑动优化 此次版本发布中也包含了众多 滑动相关的问题 修复，包括触控板的交互优化以及在滑动组件中文本选择时的行为。...在迁移至空安全时，itemBuilder 的类型迁移至了 IndexedWidgetBuilder，即不允许返回 null，而在以前 null 可以用来代表列表已经到了底部等。...具体来说，Flutter 现在会使用 Dart VM 中 RAIL 风格 的 API，让 路由转场时渲染延迟更低，即让堆内存在转场时保持增长而不是进行 GC，避免造成动画的卡顿。...应用在图片的多路过滤器上 应用在自定义着色器上 一个例子是，Flutter 框架现已使用这个 API 以优化 Android 上的页面切换动画的性能，几乎减少了帧光栅化一半的时间且减少了卡顿，而且在支持这些刷新率的机器上动画可以达到

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

    干货 | Flutter在携程复杂业务的高性能之旅

    通过Flutter Performance查看组件渲染次数，发现整个界面都在刷新，当我们多次滑动页面后，发现很多组件都渲染了多次，如下图所示： 通过DevTools，在滑动改变顶部的透明度时，发现FPS...如下图所示，借助 flutter_xlider三方组件实现区间选择效果： 在onDragCompleted回调方法中处理界面及数据刷新，代码如下： Widget rangeSliderView() {...，在刷新列表时要取消掉还未返回数据的请求。...在酒店列表和详情页面中，都有较多的酒店和房型的图片，图片多，导致内存占用高，加载耗时，影响用户体验。...在使用缓存时，发现一个问题，就是图片容易模糊，变形。比如在加载一个高清大图时，采样比例无法单纯的根据页面widget的宽高来计算，设置太小会模糊，设置大了，又不利于节省缓存。

    2.1K20

    2021 年值得期待的 Flutter 数据流管理方案

    不像 Redux 在 React 中独占鳌头，Flutter 的数据流管理方案层出不穷，本文旨在介绍在2021年值得使用的 Flutter 数据流管理方案，除了大家都比较熟悉的 InheritedWidget...对于声明式的 UI 而言，UI = f(state)，f 是 build 方法，方案的设计首先应该考虑的是能够使得状态的消费者可以获取到对应的数据，在状态更新时被通知到，并可以减少不必要的刷新。...Consumer，再有 ViewModel 层有不必要的重建之类，还是会导致页面不必要的刷新 不同页面数据有依赖关系或者包含关系时，不好做数据依赖刷新。...3.4 封装通用的页面容器 在 业务场景中，绝大多数页面都是需要通过 api 请求获取数据，根据返回结果页面显示：加载中、正常页面、空状态、网络错误、其他错误这么几种情况。...总结 最后，把以上的三种数据流管理方案做一个小结供大家选择时对比下 方案 优点 缺点 InheritedWidget 1. Flutter 自带的数据流管理方案 1. 太多模板代码2.

    2.4K20

    【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

    组件是悬浮按钮组件 ; FloatingActionButton 组件常用设置 : 点击事件 : onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码 : 在构造函数的可选参数中...列表组件 , 然后设置了下拉刷新回调方法 , 在 onRefresh 字段设置 ; // 刷新指示器组件 RefreshIndicator( //...// 刷新时回调的方法 // 列表发生下拉操作时, 回调该方法 // 该回调是 Future 类型的 onRefresh: _refreshIndicatorOnRefresh...// 刷新时回调的方法 // 列表发生下拉操作时, 回调该方法 // 该回调是 Future 类型的 onRefresh: _refreshIndicatorOnRefresh...://dart.cn/ Dart 开发者官网 : https://api.dart.dev/ Flutter 中文网 ( 非官方 , 翻译的很好 ) : https://flutterchina.club

    4.3K00

    掌握这些浏览器开发者技巧，绝对能提升你的level

    在Chrome菜单：更多工具 >开发者工具 在页面元素上右键，选择“检查” 快捷键：F12有时候被占用了，记得试试Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac) 主要窗口和功能...2.过滤器： 控制在请求列表中显示哪些资源。 3.时间线： 检索资源的时间轴。 4.请求列表： 按时间顺序展示请求项。 5.请求的总体概要： 显示请求总数、传输的数据量和加载时间。 控制器 ?...3.Preserve log Preserve log勾选后，会保存跨页面的请求，这样跳转前后的请求都会显示在同一个请求列表中。 ?...网络面板的过滤器，主要就是起过滤功能，一个页面的请求中包含各种资源文件和接口数据的请求，可以通过过滤器 模块来筛选你想要的文件类型，常用的是XHR和js。 ? ? 请求列表 ?...如果想重新发送 XHR 请求，一般我们会选择刷新页面，其实可以直接在“网络”面板中右键选择Replay XHR调试。 ?

    93430

    Flutter 刷新页面：通过下拉刷新提升用户体验

    在丰富的挂件中，Flutter 提供了一个很好的方式实现下拉来刷新应用。这个手势，对很多用户来说很熟悉，就是下拉页面来触发更新的动作，获取新的数据并更新屏幕展示。...下拉更新的基础 下拉刷新是应用移动端中的一个常见模式，它允许用户手动刷新页面内容。在 Flutter 中，这个功能被封装在 RefreshIndicator 挂件中。...当用户下拉页面时，这个函数被调用，它的任务是拉取新的数据并更新我们应用中状态。很重要的一点是，这个函数返回 Future 来保持刷新指示器可见，直到新数据被下载且页面被更新。...Flutter 响应式框架能够在数据更改时，更新应用程序的用户界面。 下拉刷新管理数据 为了有效联合下拉刷新来管理状态，我们可以在众多 Flutter 生态中选择其中一种。...无论选择哪种方法，目标都是确保在触发刷新操作时，应用程序的状态能够反映新数据，而不会导致用户界面的中断或者不一致。

    2.3K10

    Flutter 实践 MVVM

    Flutter 实践 MVVM 在做Android或iOS开发时，经常会了解到MVC，MVP和MVVM。MVVM在移动端一度被非常推崇，虽然也有不少反对的声音，不过MVVM确实是不错的设计架构。...在做flutter开发时，刚学习时写的很随意，什么东西都写一起，也不去考虑解耦等问题。但是实际生产开发是不能这样做的，否则项目稍大就无法维护。...Model好说，普通对象嘛，顶多处理一下序列化的问题。 在Flutter中，一切UI皆Widget，那么View层也很明确了，就是Widget部分。...本文中，尝试用MVVM结构，实现仿知乎日报的列表页面。 实例 实现的效果如下： [App截图] 网络层 请求就是使用官方的http库发起，具体可以看源码。...知乎日报的API网上一搜即可，本文不再赘述。 Model 日报这里的网络回包是json格式的，我们选择用json_serializable来做自动序列化/反序列化。

    10.9K70

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

    ”练过的案例都是 “单个页面”，缺乏 “多页面跳转、状态管理、网络请求、本地存储” 的完整项目，求职时无亮点课程进阶阶段聚焦 “2 个企业级完整项目”（电商 APP、社交 IM APP），覆盖从 “需求分析...），课程内容均来自 “真实项目踩坑总结”—— 比如讲 “网络请求” 时，会带你避开 “请求超时未处理”“token 过期未刷新” 等企业常见问题，而非只讲 “dio 库的基础用法”；“极速入门” 设计，...→商品详情→个人中心” 的页面跳转流程，实现 “点击商品列表进入详情页，显示对应商品名称”。...跨端适配与差异化处理（3 天）解决 “同一代码在 iOS 和 Android 显示不一致” 的核心问题：屏幕适配：用 “MediaQuery 获取屏幕宽高”“ResponsiveFramework 插件...“电商 APP 的核心模块（商品列表 + 详情 + 购物车）”，并尝试 “将公司的某个原生页面用 Flutter 重写”，验证跨平台优势。

    52110

    fish_redux使用详解---看完就会用！

    记得在创建的文件夹上右击，选择：Reload From Disk；把创建的文件刷新出来 [image-20200808181410600] 创建成功的文件结构 page：总页面，注册effect，reducer...，可以在MaterialApp中的onGenerateRoute方法中，使用相应页面切换风格，这边使用通用风格：Material ///需要使用hide隐藏Page import 'package:flutter...[img] 列表文章 理解了上面俩个案例，相信你可以使用fish_redux实现一部分页面了；但是，我们堆页面的过程中，能体会列表模块是非常重要的一部分，现在就来学学，在fish_redux中怎么使用ListView...这边我们使用的是玩Android的api，这个api有个坑的地方，没设置开启跨域，所以运行在web上，这个api使用会报错，我在玩Android的github上提了issue，哎，也不知道作者啥时候解决...,会报空指针 /// 下面的字段,赋初值,就是初始时展示的全局状态 /// 这地方初值,理应从缓存或数据库中取,表明用户选择的全局状态 themeColor: Colors.lightBlue

    3.1K43

    Flutter 网络请求深度解析

    一、核心网络请求库对比1.常用库特性对比在Flutter开发中，选择一个合适的网络请求库是构建稳定应用的第一步。不同的项目规模和团队背景需要不同的技术栈支持。...http、dio、retrofit和chopper是目前最主流的几种选择。http：由Flutter官方团队维护，轻量、简洁，适合初学者或对网络功能要求不高的小型项目。...refresh()方法简化下拉刷新调用。该模式实现了“请求→状态更新→UI重绘”的闭环，是现代Flutter应用的标准范式。...RefreshIndicator支持下拉刷新。列表末尾显示加载更多指示器。整个页面逻辑清晰，用户体验流畅，是典型的生产级实现。...应用启动时检查网络是否可用。在无网络时禁用请求或提示用户。网络恢复后自动重试失败的请求。提升离线体验和应用健壮性。是构建高质量App的必备功能。

    19421

    Flutter 适配 OpenHarmony 全流程实战：基于 GitCode 社区项目快速落地

    步骤 2：保存令牌 ⚠️ 重要提醒：令牌生成后仅显示一次，生成后请立即复制完整字符串并安全存储（如存入密码管理器），页面关闭后将无法再次查看！ 三、在项目中配置令牌 1....查看本地编译器版本 在 DevEco Studio 中按路径查询： File → Settings → HarmonyOS SDK 记录「Compile SDK Version」（示例：6.0.0...准备运行环境 模拟器：启动 DevEco Studio 中的 HarmonyOS 6 模拟器（建议分配 ≥4GB 内存，避免运行卡顿）； 真机：鸿蒙手机开启“开发者模式”，连接电脑并选择“文件传输”模式...启动项目 在 DevEco Studio 右下角选择目标设备（模拟器/真机）； 点击顶部绿色“Run”按钮（或快捷键 Shift+F10），开始构建项目； 首次构建耗时约 3-5 分钟（依赖网络速度），...确认令牌已勾选 read_repository 权限 构建报“版本不兼容” 统一修改 build-profile.json5 等文件的 API 版本，与编译器版本保持一致 设备列表为空（hdc 无法识别

    27010

    Flutter 3更新详解

    欢迎大家尝试 Surface Duo 模拟器示例，其中包含了 Flutter Gallery 的一个特别派生版本，以便了解 Flutter 在双屏中的实际运行情况: 支持 iOS 可变刷新率 Flutter...Web 应用的生命周期 Flutter web 应用的新生命周期 API 提升了灵活性，可实现从托管 HTML 页面控制 Flutter 应用的引导程序，并支持使用 Lighthouse 分析您的应用的性能表现...Android 上的内联广 告 使用 google_mobile_ads package 时，您应该可以感受到用户关键交互 (如页面之间的滚动和切换) 的性能有所提升。...如需了解详情，请在 pub.dev 上查看 google_mobile_ads package 页面。 重大变更 在持续扩展和改进 Flutter 的过程中，我们会尽量把重大变更的数量维持在最低限度。...Flutter 3 包含以下重大变更: 2.10 版之后移除已弃用的 API 页面切换转为使用 ZoomPageTransitionsBuilder Chips 的 useDeleteButtonTooltip

    4.5K20

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

    在开发过程中，也遇到了一些性能相关问题和用户反馈，比如长列表滚动卡顿、页面打开时间较长、页面打开后部分数据加载时间较长等问题。...这些现象出现时，页面会出现不连续的动画，页面刷新会短暂停顿，打开新页面速度较慢，新页面出现白屏或者较长时间的加载动画，用户做点击滑动等交互时页面不响应。...我们使用的工具是官方提供开发者工具中的Performance View，并选择了Enhance tracing模式。...我们的框架也利用此方法监控了我们app中的每个页面是否在退出时还存在泄漏。 另外通过Flutter的Dev tool中的内存监控工具也能实现对泄漏对象的发现。...b) 一些观察者模式中的订阅者在页面退出时没有取消订阅 这种是大家比较熟悉的一种情况。

    2.5K10

    Flutter区别于其他技术的关键是什么？

    一开始，为了解决原生开发的高成本、低效率，出现了Hybrid混合开发，也就是在原生中嵌入依托于浏览器的WebView，Web浏览器中可以实现的需求在WebView中基本都可以实现。...水平扫描时，显示器会发出一个水平同步信号（HSync）；而当一帧画面绘制完成之后，电子枪恢复原位，准备下一次扫描之前，显示器会发出一个垂直同步信号（Vsync），显示器以固定的频率刷新，这个刷新率就是Vsync...操作系统在呈现图像时遵循了这种机制，而Flutter作为跨平台开发框架也采用了这种底层方案。下面有一张更为详尽的示意图来解释Flutter的绘制原理。 ?...在重绘边界内，Flutter会强制切换新的图层，这样就可以避免边界内外的互相影响，避免无关内容置于同一图层引起不必要的重绘。 ? 重绘边界的一个典型场景是ScrollView。...ScrollView滚动的时候需要刷新视图内容，从而触发内容重绘。而当滚动内容重绘时，一般情况下其他内容是不需要重绘的，这时候重绘边界就派上用场了。

    3.2K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券