用 Flutter 优化 App 的性能
近年来，Flutter 成为了移动端开发的新宠。作为一款跨平台的开发框架，Flutter 不仅能够快速开发出高质量的应用，还能在一定程度上优化应用性能，提升用户体验。本文将介绍如何用 Flutter 优化 App 的性能，包括以下几个方面：异步编程、页面渲染优化、图片优化、组件复用及其它小技巧。
一、异步编程
异步编程是优化性能的关键。在 Flutter 中，通过 Future 和 Stream 两个异步编程框架，我们可以轻松地进行异步编程。
1.使用 Future
在进行耗时操作时，为了不阻塞用户界面，我们可以使用 Future 进行异步处理。Future 可以将耗时操作放在后台线程中，当得到结果后，再回到主线程更新 UI。
例如，我们可以用 Future 来显示网络图片，如下所示：
-- -------------------- ---- -------
------ --------------------------------
------ ------------------------ -- -----
----- ---------------- ------- --------------- -
----- ------ ---------
--------------------- ---- --------- --------------- - ---------- -----
---------
------ ------------------ -------- -
------ --------------
------- -------------------
-------- ------------- -------- ------------- --------- -
-- ------------------------- -- --------------------- -
-- ------------------- -
------ ------------ --------------------
- ---- -
------ --------------------------------------
-
- ---- -
------ ----------------------------
-
--
--
-
-其中，FutureBuilder 是一个 Flutter 自带的小部件，它会自动根据 Future 的执行状态来更新 UI。在获取完图片数据后，我们可以使用 Image.memory() 来将数据转换成图片，并显示在界面上。
2.使用 Stream
另外一个非常实用的异步编程框架是 Stream。它能够实现类似于 RxJava 的响应式编程方式，让我们的代码更加简洁、直观。例如，我们可以用 Stream 来实现一个有趣的计时器小部件：
-- -------------------- ---- -------
------ -------------
------ --------------------------------
----- --------- ------- -------------- -
----- --- ---------
-------------- ---- --------- ----------------
---------
--------------- ------------- -- ------------------
-
----- --------------- ------- ---------------- -
--------------------- ------------------
----------------------- --------------------
---------
---- ----------- -
------------------
----------------- - ------------------------
------------------- -
--------------------------------- --- ------- -- ------
----------------------
-------------- -
------------------------------------- - ------
---
-
---------
---- --------- -
-----------------------------
--------------------------
----------------
-
---------
------ ------------------ -------- -
------ --------------
------- -------------------------
-------- ------------- -------- ------------- --------- -
-- ------------------------- -- --------------------- -
------ --------------
- ---- -
------ ---------------- -------------------
-
---
-
-在这个例子中，我们使用 Stream.periodic() 来生成一个每秒钟递增的数字流，再将它取过来用于倒计时，并将结果通过 StreamController 发送给 StreamBuilder，最后在 UI 上显示。这个小部件非常实用，可以用于呈现各种有趣的倒计时效果。
二、页面渲染优化
在复杂应用程序中，页面渲染可能会导致性能问题。为了解决这个问题，我们需要采用以下策略：逐步加载、分批渲染、尽量避免使用 ListView 等具体实现细节。
1.逐步加载
逐步加载是指按需生成和渲染页面的部分内容，而不是一次性生成整个页面。这样做可以避免因渲染大量内容而导致的滞后，提高用户体验。Flutter 中，我们可以通过延迟渲染 Widget 来实现逐步加载。
例如，我们可以使用ListView.builder来构建一个很长的列表，但不必提前加载所有的列表项，而是等到滚动到某个范围之后再加载，如下：
-- -------------------- ---- -------
-----------------
---------- ----------
------------ ------------- -------- --- ------ -
-- ------ -- ------ -- ----- -- ----- -
------ ------------------------
- ---- -
------ ------------------
-
--
-在这个例子中，我们通过 _start 和 _end 两个变量记录当前可见的列表项的范围，如需加载更多列表项，只需调整这两个变量即可。
2.分批渲染
分批渲染是指将复杂的 Widget 分成多个层次，每次只渲染部分层次。这种方法可以避免在渲染复杂的 Widget 时出现卡顿。
例如，我们可以使用 Column 和 Row 将界面元素布局成多个层次，分别使用 Flex 和 Expanded 等部件控制其占据的空间，从而实现分批渲染。如下：
Column(
children: <Widget>[
Expanded(flex: 1, child: Text('Title')),
Expanded(flex: 2, child: Text('Content')),
Expanded(flex: 1, child: Text('Footer')),
],
)在这个例子中，我们将界面分成了三行，分别占据不同的空间，最终实现了分批渲染的目的。
3.尽量避免使用 ListView
ListView 是一个功能强大的组件，能够快速地构建出长列表。但在一些场合下，它会导致性能问题。因此，在需要滚动的大型列表中，使用 ListView.builder 和其他分段渲染技术通常比使用 ListView 更好。
三、图片优化
图片是应用程序中常用的元素之一。但是，大量的图片可能会影响应用程序的性能。Flutter 提供了一些工具来帮助我们优化图片，包括使用缓存、压缩图片等等。
1.使用缓存
缓存是优化图片性能的重要措施。Flutter 提供了一个内置的缓存框架，可以轻松地对图片进行缓存。
例如，我们可以使用 cached_network_image 库来快速加载网络图片并进行缓存，如下所示：
CachedNetworkImage( imageUrl: imageUrl, placeholder: (context, url) => CircularProgressIndicator(), errorWidget: (context, url, error) => Icon(Icons.error), )
在这个例子中，我们使用 CachedNetworkImage 来加载网络图片，如果图片没有被缓存，则会自动下载并缓存，如果已经被缓存，则直接从缓存中读取。
2.压缩图片
压缩图片也是一种优化图片性能的方式。在 Flutter 中，我们可以使用 flutter_image_compress 库来对图片进行压缩。
例如，我们可以使用以下代码来对图片进行压缩：
import 'package:flutter_image_compress/flutter_image_compress.dart'; var compressedImage = await FlutterImageCompress.compressWithFile( filePath, quality: quality, );
在这个例子中，我们使用了 FlutterImageCompress 来对图片进行压缩。quality 参数用于指定压缩质量，值越大，图片质量就越好，但文件大小也越大。
四、组件复用
组件复用可以减少内存占用和提高性能。Flutter 提供了一些方法，例如 InheritedWidget 和 Provider，来实现组件复用。
1.InheritedWidget
InheritedWidget 是 Flutter 中最基本的组件复用机制。它提供了一种在 Widget 层次结构中共享数据的方式。
例如，我们可以使用 InheritedWidget 来实现一个多语言的应用程序：
-- -------------------- ---- -------
----- ------------ ------- --------------- -
----- ------ -------
----------------- ---- --------- ------------ --------- ------ -------
- ---------- ---- ------ -------
---------
---- ------------------------------- ---- -- ------ -- -----------
------ ------------ --------------- -------- -
------ -----------------------------------------------------------
-
-在这个例子中，我们使用了 InheritedWidget 来实现多语言功能。Localization 类的作用是将当前语言环境传递给子 Widget，从而实现共享数据。如果语言环境发生变化，则 InheritedWidget 会通知其子 Widget 重新渲染。
2.Provider
Provider 是一个比 InheritedWidget 更高阶的组件复用机制。它提供了更方便的数据共享方式，在大型应用程序中实现组件复用时非常实用。
例如，我们可以使用 Provider 来实现一个 Counter 应用：
-- -------------------- ---- -------
------ --------------------------------
------ ---------------------------------
---- ------ -
-------
-----------------------
------- ------------- -------- -- ----------
------ --------
--
--
-
----- ------- ---- -------------- -
--- ------ - --
--- --- ----- -- -------
---- ----------- -
---------
------------------
-
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
----- -------
--
-
-
----- ---- ------- --------------- -
---------
------ ------------------ -------- -
----- ------- - ------------------------------
------ ---------
------- -------
------ ------------- ------
--
----- -------
------ -----
-------------------
------ ------------------- ----
--
--
--------------------- ---------------------
---------- -- -
--------------------
--
------ ----------------
--
--
-
-在这个例子中，我们使用了 Provider 来实现 Counter 应用程序。Counter 类继承自 ChangeNotifier，这意味着它是一个可变的数据模型，并可以通知它的侦听器进行更改。MyApp 为根小部件，其子 Widget Home 从 Provider 中获取 Counter，以便显示当前计数器值。在点击 FloatingActionButton 时，应用程序的计数器将递增，并更新UI。
五、其它小技巧
除了上述几个方面之外，还有一些小技巧可以帮助我们优化 Flutter 应用程序的性能。
1.避免不必要的重建
在 Flutter 中，只有当 Widget 的状态发生变化时，才会进行重建。如果我们不需要构建 Widget 的状态，则可以使用 const 和 final 修饰符来避免不必要的重建。
例如，在下面的代码中，我们使用 const 修饰符来避免不必要的重建：
-- -------------------- ---- -------
----- ---------- ------- --------------- -
------ ----- --------- ---------- -
------------------- --- ----------- -----------------
---------
------ ------------------ -------- -
------ ---------
------- -------
------ -------- ---- -------
--
----- -------
------ -----
------- --------
------ -----------
--
--
--
-
-在这个例子中，我们将 _textStyle 字段声明为常量，以避免在每次重建 MyHomePage 时都创建新的 TextStyle 对象。
2.缩小动画范围
动画可以大大提升用户体验，但如果动画的范围过大，则会影响性能。因此，在使用动画时应尽量缩小动画范围。
例如，我们可以只对单个小部件应用动画，而不是整个页面：
-- -------------------- ---- -------
----- -------- ------- -------------- -
---------
-------------- ------------- -- -----------------
-
----- -------------- ------- ---------------
---- ------------------------------ -
------------------- ------------
----------------- -----------
---------
---- ----------- -
------------------
----------- - --------------------
--------- ----- ----------------- ---
------ -----
------------------ ------
---------- - ----------------
------- ------------
------ --------------
--
-
---------
---- --------- -
----------------------
----------------
-
---------
------ ------------------ -------- -
------ ----------
------- ----
------ ----
------ ----------------
------ -----------
------ --------------
--
--
-
-在这个例子中，我们使用 ScaleTransition 将一个 FlutterLogo 组件进行动画，而不是整个页面。
总结
通过本文所述的方法，我们可以轻松地优化 Flutter 应用程序的性能，提高用户体验。但应注意的是，性能优化不应成为权宜之计，而是应该是应用程序开发的一个重要环节，要始终进行追求，以实现真正的高质量应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b39aae48841e9894fe0bab