ChatGPT + Flutter快速开发多端聊天机器人App

核心代码，注释必读

// download：3w lexuecode com

Flutter快速上手指南

1. 对 Flutter 的初步认识

提起Flutter，不得不说一下跨平台开发，先来了解一下跨平台开发的一些知识。

1.1 跨平台技术

根据其原理，大致分为三类：

1. H5 + 原生混合开发（Cordova、 lonic、微信小程序）

• 需要动态变更的内容通过H5 实现，WebView 加载，系统能力则需要原生支持；
• web 技术栈，社区及资源丰富；
• 复杂界面或动画有性能问题；

2. JavaScript 开发 + 原生渲染（React Native、Weex）

• 使用JavaScriptCore将虚拟DOM布局信息传递给原生，原生根据布局信息通过对应的原生控件去渲染
• web 开发技术栈，上手快，开发成本低，性能比 H5 提高很多，支持动态化；
• JS 为脚本语言，执行时需要 JIT(Just In Time，运行时编译)，执行效率和 AOT(Ahead Of Time，运行前编译)代码有差距，依赖原生控件，不同平台控件需要单独维护；

3. 自绘 UI + 原生（Flutter、QT for mobile）

• 在不同平台实现统一接口的渲染引擎绘制 UI，不依赖系统原生控件；

• 性能高，灵活、容易维护，同一套代码，使用同一个渲染引擎；

• 动态性不足，采用 AOT 模式编译发包

ChatGPT + Flutter快速开发多端聊天机器人App - Flutter性能优化

尽量减少消耗资源的操作

有些操作特别消耗资源。很显然，你只想在必要地时候使用这些操作。在这种情况下，如何设计和实现应用的 UI，对运行效率有很大影响。

控制 build() 方法的耗时

以下是在设计你的 UI 时的一些建议：

• 避免在 build() 方法中进行重复且耗时的工作，因为当父 widget 重建时，子 Wdiget 的 build() 方法会被频繁地调用。
• 避免在一个超长的 build() 方法中返回一个过于庞大的 widget。把它们分拆成不同的 widget，并进行封装，另外它们要这样改变：

谨慎使用 saveLayer()

一些 Flutter 代码调用了性能代价很大的 saveLayer() 方法来实现 UI 中的各种视觉效果。你使用的其他 widget 或者 package 可能会在幕后调用它。也许你的应用程序会大量调用 saveLayer()；过多调用 saveLayer() 会导致卡顿。

为什么 saveLayer 代价很大？

调用 saveLayer() 会开辟一片离屏缓冲区并将内容绘制到离屏缓冲区可能会触发渲染目标切换。 GPU 希望直达目标地运行，但渲染目标迫使 GPU 暂时重定向到该数据流，然后又直接把它切回来。这样会对渲染吞吐量造成特别大的破坏性。

什么时候需要 saveLayer？

在运行时，如果你需要动态地显示各种形状效果（例如），每个形状都有一定地透明度，可能（或可能不）重叠，那么你几乎必须使用 saveLayer()。

调试 saveLayer 的调用

你如何才能知道应用程序调用 saveLayer() 的频率，直接还是间接调用？ saveLayer() 方法会触发上的一个事件