Flutter 的性能分析、工程架构与细节处理

2021年1月10日 397点热度 0人点赞 0条评论

作者 | 有道智云

本文转载自公众号有道技术团队

本期文章，有道智云技术团队将从性能、架构、适配等多个方面，全面讲解 Flutter 这一跨端技术。从工程工作量的角度来看，特别是快速试错和业务扩展阶段，Flutter 是非常值得推荐的利器。相信不久的将来，一码多端会变得越来越重要，特别是在新业务的探索成本上表现得十分抢眼。

为何 Flutter

跨端技术众多，为何选择 Flutter？它能带来哪些优势，有哪些缺点？

先看看具体的工程效果：

web 端效果测试请点击文末【阅读原文】体验。

Flutter VS 原生

无论如何，原生的运行效率毋庸置疑是最高的，但是从工程工作量的角度来对比的话，特别是快速试错和业务扩展阶段，Flutter 是目前为止比较推荐的利器。

Flutter VS Web

任何跨端的技术都是基于一码多端的思维，解决工程效率的问题，之前很多的跨端技术，例如 React Native 等都是基于 web 的跨端性解决方案，但是大家都知道，web 在移动端上的运行效率和 PC 上有巨大差距的，这就导致 RN 不能很有效地在移动端完成各种复杂的交互式运算（例如复杂的动画运算，交互的执行性能等），即便是引入了 Airbnb 的 Lottie 引擎依然会在低端的手机上面显得很卡顿（当然也可以使用一些自研的引擎技术来针对各端来解决，不过这样就失去了跨端的意义）。

Flutter 性能

Flutter 的编译方式和产物是决定其高效运行效率的前提，不同于 web 的跨端编译一样（web 的跨端编译大多是选择了使用 "桥" 的概念来调用编译产物，通常是使用了原生端的入口 + web 端的桥来实现），Flutter 几乎是把 dart 的源码通过不同平台的编译原理生成各平台的产物，这种"去桥"的产物正式我们所希望得到的、贴近原生运行性能的编译产物（当然，在 dart 最初设计的时候，是参考了很多前端的结构来完成的，特别从语法上面能够很明显地感受到前端的痕迹，而且最初的 dart2js 的原理也是同样"桥"的概念）。例如 9 月 23 号 google 发布的新 Flutter 版本中，在支持的 Windows 编译产物上，就是通过类似 Visual Studio 的编译工具（如果要将你的 Flutter 工程编译成 Windows 产物，需要提前安装一些 VS 相关的编译插件），生成了 Windows 下的工程解决方案 .sln，最终生成 dll 的调用方式，运行起来很流畅，可以下载附件中的 Release.zip 来尝试运行。（公众号后台回复「 Flutter 」或「 flutter 」获取）

（PS：这里所有编译工程都是通过同一套代码完成，包括上文中的 web 地址、移动端案例还有这里的 Windows 案例）

与 RN 的性能对比

以上是同样功能模块下，Flutter 和 RN 的一些数据上的对比，是从众多的数据中抽取出来比较有代表性的一组。

跨端平台的多样性

引擎

Flare-Flutter 是一款十分优秀的 Flutter 动画引擎，编译出的动画已经在 Windows、移动端、web 上亲测验证过。

语法糖

A?.B

如果 A 等于 null，那么 A?.B 为 null

如果 A 不等于 null，那么 A?.B 等价于 A.B

Animal animal = new Animal('cat');
Animal empty = null;

//animal 非空，返回 animal.name 的值 catprint(animal?.name);

//empty 为空，返回 nullprint(empty?.name);

A??B

如果 A 等于 null，那么 A??B 为 B

如果 A 不等于 null，那么 A??B 为 A

综合测评

互动应用

Flutter 生成的互动可以嵌入到任何端中使用精简的指令集进行互动，为互动场景（教学场景等带来巨大的希望）。

Flutter 业务架构

Flutter 中目前是没有现成的 mvvm 框架的，但是我们可以利用 Element 树特性来实现 mvvm。

ViewModel

abstract class BaseViewModel {
  bool _isFirst = true;
  BuildContext context;

  bool get isFirst => _isFirst;

  @mustCallSuper
  void init(BuildContext context) {
    this.context = context;
    if (_isFirst) {
      _isFirst = false;
      doInit(context);
    }
  }

  // the default load data method
  @protected
  Future refreshData(BuildContext context);

  @protected
  void doInit(BuildContext context);

  void dispose();

class ViewModelProvider<T extends BaseViewModel> extends StatefulWidget {
  final T viewModel;
  final Widget child;

  ViewModelProvider({
    @required this.viewModel,
    @required this.child,
  });

  static T of<T extends BaseViewModel>(BuildContext context) {
    final type = _typeOf<_ViewModelProviderInherited<T>>();
    _ViewModelProviderInherited<T> provider =
        // 查询 Element 树中缓存的 InheritedElement
        context.ancestorInheritedElementForWidgetOfExactType(type)?.widget;
    return provider?.viewModel;
  }

  static Type _typeOf<T>() => T;

  @override
  _ViewModelProviderState<T> createState() => _ViewModelProviderState<T>();
}

class _ViewModelProviderState<T extends BaseViewModel>
    extends State<ViewModelProvider<T>> {
  @override
  Widget build(BuildContext context) {
    return _ViewModelProviderInherited<T>(
      child: widget.child,
      viewModel: widget.viewModel,
    );
  }

  @override
  void dispose() {
    widget.viewModel.dispose();
    super.dispose();
  }
}

// InheritedWidget 可以被 Element 树缓存
class _ViewModelProviderInherited<T extends BaseViewModel>
    extends InheritedWidget {
  final T viewModel;

  _ViewModelProviderInherited({
    Key key,
    @required this.viewModel,
    @required Widget child,
  }) : super(key: key, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => false;

DataModel

import 'dart:convert';

import 'package:pupilmath/datamodel/base_network_response.dart';
import 'package:pupilmath/datamodel/challenge/challenge_ranking_list_item_data.dart';
import 'package:pupilmath/utils/text_utils.dart';

/// 历史榜单
class ChallengeHistoryRankingListResponse
    extends BaseNetworkResponse<ChallengeHistoryRankingData> {
  ChallengeHistoryRankingListResponse.fromJson(Map<String, dynamic> json)
      : super.fromJson(json);

  @override
  ChallengeHistoryRankingData decodeData(jsonData) {
    if (jsonData is Map) {
      return ChallengeHistoryRankingData.fromJson(jsonData);
    }
    return null;
  }
}

class ChallengeHistoryRankingData {
  String props;
  int bestRank; // 最佳排名
  int onlistTimes; // 上榜次数
  int total; // 总共挑战数
  List<ChallengeHistoryRankingItemData> ranks; // 先给 10 天

  // 二维码
  String get qrcode =>
      TextUtils.isEmpty(props) ? '' : json.decode(props)['qrcode'] ?? '';

  ChallengeHistoryRankingData.fromJson(Map<String, dynamic> json) {
    props = json['props'];
    bestRank = json['bestRank'];
    onlistTimes = json['onlistTimes'];
    total = json['total'];
    if (json['ranks'] is List) {
      ranks = [];
      (json['ranks'] as List).forEach(
          (v) => ranks.add(ChallengeHistoryRankingItemData.fromJson(v)));
    }
  }
}

/// 历史战绩的 item
class ChallengeHistoryRankingItemData {
  ChallengeRankingListItemData champion; // 当天最好成绩
  ChallengeRankingListItemData user;

  ChallengeHistoryRankingItemData.fromJson(Map<String, dynamic> json) {
    if (json['champion'] is Map)
      champion = ChallengeRankingListItemData.fromJson(json['champion']);
    if (json['user'] is Map)
      user = ChallengeRankingListItemData.fromJson(json['user']);
  }

View

import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:pupilmath/datamodel/challenge/challenge_history_ranking_list_data.dart';
import 'package:pupilmath/entity_factory.dart';
import 'package:pupilmath/network/constant.dart';
import 'package:pupilmath/network/network.dart';
import 'package:pupilmath/utils/print_helper.dart';
import 'package:pupilmath/viewmodel/base/abstract_base_viewmodel.dart';
import 'package:rxdart/rxdart.dart';

// 每日挑战历史战绩
class ChallengeHistoryListViewModel extends BaseViewModel {
  BehaviorSubject<ChallengeHistoryRankingData> _challengeObservable =
      BehaviorSubject();

  Stream<ChallengeHistoryRankingData> get challengeRankingListStream =>
      _challengeObservable.stream;

  @override
  void dispose() {
    _challengeObservable.close();
  }

  @override
  void doInit(BuildContext context) {
    refreshData(context);
  }

  @override
  Future refreshData(BuildContext context) {
    return _loadHistoryListData();
  }

  _loadHistoryListData() async {
    Map<String, dynamic> parametersMap = {};
    parametersMap["pageNum"] = 1;
    parametersMap["pageSize"] = 10; // 拿 10 天数据

    handleDioRequest(
      () => NetWorkHelper.instance
          .getDio()
          .get(challengeHistoryListUrl, queryParameters: parametersMap),
      onResponse: (Response response) {
        ChallengeHistoryRankingListResponse rankingListResponse =
            EntityFactory.generateOBJ(json.decode(response.toString()));

        if (rankingListResponse.isSuccessful) {
          _challengeObservable.add(rankingListResponse.data);
        } else {
          _challengeObservable.addError(null);
        }
      },
      onError: (error) => _challengeObservable.addError(error),
    );
  }

  Future<ChallengeHistoryRankingData> syncLoadHistoryListData(
    int pageNum,
    int pageSize,
  ) async {
    Map<String, dynamic> parametersMap = {};
    parametersMap["pageNum"] = pageNum;
    parametersMap["pageSize"] = pageSize;

    try {
      Response response = await NetWorkHelper.instance
          .getDio()
          .get(challengeHistoryListUrl, queryParameters: parametersMap);
      ChallengeHistoryRankingListResponse rankingListResponse =
          EntityFactory.generateOBJ(json.decode(response.toString()));
      if (rankingListResponse.isSuccessful) {
        return rankingListResponse.data;
      } else {
        return null;
      }
    } catch (e) {
      printHelper(e);
    }
    return null;
  }

一些基础架构

View 和 ViewModel 如何实现初始化和相互作用

Flutter 业务架构抽离

如果是统一系列的产品业务形态，还可以抽离出一套核心的架构，复用在同样的生产产品线上，例如当前产品线以教育为主，利用 Flutter 的一码多端性质，则可以把题版生产工厂、渲染题版引擎、适配框架、以及跨端接口的框架都抽离出来，迅速地形成可以推广复用的模板，可以事半功倍地解决掉业务上的试错成本问题，当然，其他产品性质的业务线均可如此。

Flutter 适配

任何框架中的 UI 适配都是特别繁重的工作，跨端上的适配更是如此，因此在同一套布局里面，各个平台的换算过程显得尤为重要，起初的时候，Flutter 中并没有提供某种诸如 dp 或者 sp 的适配方式，而且考虑到直接更改底层 Matrix 换算比例的话可能会让原本高清分辨率的手机显示不是那么清楚，而 Flutter 的宽高单位都是 num，最后编译的时候才会去对应到各个平台的单位尺寸。为了减轻设计师的设计负担，这里通常使用一套 iOS 的设计稿即可，以 375 x 667 的通用设计稿为例，转换过来到 android 上是 360 x 640 （对应 1080 x 1920），这里 flutter 的单位也是和对应手机的像素密度有关的。

构造一个转换工具类

// 目前适配 iPhone 和 iPad 机型尺寸
import 'dart:io';
import 'dart:ui';
import 'dart:math';

import 'package:pupilmath/utils/print_helper.dart';

bool initScale = false;
// 针对 iOS 平台的 scale 系数
double iosScaleRatio = 0;
// 针对 android 平台的 scale 系数
// （因为所有设计稿均使用 iOS 的设计稿进行，所以需要转换为 android 设计稿上的尺寸，
// 否则无法进行小屏幕上的适配）
double androidScaleRatio = 0;
// 文字缩放比
double textScaleRatio = 0;

const double baseIosWidth = 375;
const double baseIosHeight = 667;
const double baseIosHeightX = 812;

const double baseAndroidWidth = 360;
const double baseAndroidHeight = 640;

void _calResizeRatio() {
  if (Platform.isIOS) {
    final width = window.physicalSize.width;
    final height = window.physicalSize.height;
    final ratio = window.devicePixelRatio;
    final widthScale = (width / ratio) / baseIosWidth;
    final heightScale = (height / ratio) / baseIosHeight;
    iosScaleRatio = min(widthScale, heightScale);
  } else if (Platform.isAndroid) {
    double widthScale = (baseAndroidWidth / baseIosWidth);
    double heightScale = (baseAndroidHeight / baseIosHeight);
    double scaleRatio = min(widthScale, heightScale);
    // 取两位小数
    androidScaleRatio = double.parse(scaleRatio.toString().substring(0, 4));
  }
}

bool isFullScreen() {
  return false;
}

// 缩放
double resizeUtil(double value) {
  if (!initScale) {
    _calResizeRatio();
    initScale = true;
  }

  if (Platform.isIOS) {
    return value * iosScaleRatio;
  } else if (Platform.isAndroid) {
    return value * androidScaleRatio;
  } else {
    return value;
  }
}

// 缩放还原
// 每个屏幕的缩放比不一样，如果在 iOS 设备上出题，则题目坐标值需要换算成原始坐标，加载的时候再通过不同平台换算回来
double unResizeUtil(double value) {
  if (iosScaleRatio == 0) {
    _calResizeRatio();
  }

  if (Platform.isIOS) {
    return value / iosScaleRatio;
  } else {
    return value / androidScaleRatio;
  }
}

// 文字缩放大小
_calResizeTextRatio() {
  final width = window.physicalSize.width;
  final height = window.physicalSize.height;
  final ratio = window.devicePixelRatio;
  double heightRatio = (height / ratio) / baseIosHeight / window.textScaleFactor;
  double widthRatio = (width / ratio) / baseIosWidth / window.textScaleFactor;
  textScaleRatio = min(heightRatio, widthRatio);
}

double resizeTextSize(double value) {
  if (textScaleRatio == 0) {
    _calResizeTextRatio();
  }
  return value * textScaleRatio;
}

double resizePadTextSize(double value) {
  if (Platform.isIOS) {
    final width = window.physicalSize.width;
    final ratio = window.devicePixelRatio;
    final realWidth = width / ratio;
    if (realWidth > 450) {
      return value * 1.5;
    } else {
      return value;
    }
  } else {
    return value;
  }
}

double autoSize(double percent, bool isHeight) {
  final width = window.physicalSize.width;
  final height = window.physicalSize.height;
  final ratio = window.devicePixelRatio;
  if (isHeight) {
    return height / ratio * percent;
  } else {
    return width / ratio * percent;
  }

具体使用：

这样每次如果有分辨率变动或者适配方案变动的时候，直接修改 resizeUtil 即可，但是这样带来的问题就是，在编写过程中单位变得很冗长，而且不熟悉团队工程的人会容易忘写，导致查错时间变长，代码侵入性较高，于是利用 dart 语言的扩展函数特性，为 resizeUtil 做一些改进。

低侵入式的 resizeUtil

通过扩展 dart 的 num 来构造想要的单位，这里用 dp 和 sp 来举例，在 resizeUtil 中加入扩展：

extension dimensionsNum on num {
  /// 转为 dp
  double get dp => resizeUtil(this.toDouble());

  /// 转为文本大小 sp
  double get sp => resizeTextSize(this.toDouble());

  /// 转为 pad 文字适配
  double get padSp => resizePadTextSize(this.toDouble());

然后在布局中直接书写单位即可：

Flutter 中的一些坑

泛型上的坑

刚开始在移动端上使用泛型来做数据的自动解析时，使用了 T.toString 来判断类型，但是当编译成 web 的 release 版本时，在移动端正常运行的程序在 web 上无法正常工作：

刚开始的时候把目标一直定位在编译的方式上，因为存在 dev profile release 三种编译模式，只有在 release 上无法运行，误以为是 release 下编译有 bug，随着和 Flutter 团队的深入讨论后，发现其实是泛型在 release 模式下的坑，即在 web 版本的 release 模式下，一切都会进行压缩（包含类型的定义），所以在 release 下，T.toString() 返回的是 null，因此无法识别出泛型特征，具体的讨论链接：

https://github.com/flutter/flutter/issues/47967

In release mode everything is minified, the (T.toString() == "Construction2DEntity") comparison fails and you get entity null returned.

If you change the code to (T ==Construction2DEntity) it will fix your app.

最后建议，无论在何种模式下，都直接写成 T== 的形式最为安全。

class EntityFactory {
  static T generateOBJ<T>(json) {
    if (1 == 0) {
      return null;
    } else if (T == "ChallengeRankingListDataEntity") {
      /// 每日挑战排行榜
      return ChallengeHomeRankingListResponse.fromJson(json) as T;
    } else if (T == "KnowledgeEntity") {
      return KnowledgeEntity.fromJson(json) as T;
    }
  }

在编译成 web 产物后如何使用 iframe 来加载其他网页

对于移动端来说，webview_flutter 可以解决掉加载 web 的问题，不过编译成 web 产物后，已经无法直接使用 WebView 插件来进行加载，此时需要用到 dart 最初设计来编写网页的一些方式，即 HtmlElmentView：

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'dart:html' as html;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
           child: Iframe()
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );
  }
}
class Iframe extends StatelessWidget {
  Iframe(){
    ui.platformViewRegistry.registerViewFactory('iframe', (int viewId) {
      var iframe = html.IFrameElement();
      iframe.src='https://flutter.dev';
      return iframe;
  });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      width:400,
      height:300,
      child:HtmlElementView(viewType: 'iframe')
    );
  }

不过这种方式会带来新的底层刷新渲染问题（当鼠标移动到某个元素时，会不停地闪动刷新），目前在新的版本上已修复，有兴趣的同学可以看看：

https://github.com/flutter/flutter/issues/53253

Flutter 如何加载本地的 html 并且进行通信

内置 html 是很多工程的需求，很多网上的资料都是通过把本地的 html 做成数据流的方式然后加载进来，这种做法的兼容性很不好，而且编写过程中容易出现很多文件流过大无法读取的问题，其实这些做法都不是很舒适，我们应该通过 IFrameElement 来进行加载并通信，做法和前端很类似：

在 iOS 13.4 上 WebView 的手势无法正常使用

官方的 webview_flutter 在上一个版本当 iOS 升级到 13.4 之后会出现手势被拦截且无法正常使用的情况，换成 flutter_webview_plugin 后暂时解决掉该问题（目前 WebView 已经做了针对性的修复，但是还未验证），但是 flutter_webview_plugin 在 iOS 上又无法写入 user-agent，目前可以通过修改本地的插件代码进行解决：

文件位置为：

flutter/.pub-cache/hosted/pub.flutter-io.cn/flutter_webview_plugin-0.3.11/ios/Classes/FlutterWebviewPlugin.m 修改内容为在 146 行（initWebview 方法中初始化 WKWebViewConfiguration 后）添加如下代码 if (@available(iOS 9.0, *)) {if (userAgent != (id)[NSNull null]) {self.webview.customUserAgent = userAgent;}}关于 webview_flutter 的手势问题还在不断的讨论中：

https://github.com/flutter/flutter/issues/53490

关于布局和运算

容器 Widget 和渲染 Widget

GlobalKey

通过 GlobalKey 获取 RenderBox 来获取渲染出的控件的 size 和 position 等参数：

浮点运算

在 dart 的浮点运算中，由于都是高精度的 double 运算，当运算长度过长的时候，dart 会自动随机最后的一位小数，这样会导致每一次有些浮点运算每一次都是不确定的，这时需要手动进行精度转换，例如在计算两条线段是否共线时：

Matrix 的平移和旋转

在矩阵的换算过程中，如果使用普通的 matrix.translate，会导致 rotate 之后，再进行 translate 会在旋转的基数上面做系数叠加平移运算，这样计算后得到的不是自己想要的结果，因此如果运算当中有 rotate 操作时，应当使用 leftTranslate 来保证每次运算的独立性：