如何在 Flutter Web 中使用 Skia/CanvasKit？

Posted 2023-02-23

技术标签:

【中文标题】如何在 Flutter Web 中使用 Skia/CanvasKit？【英文标题】：How to use Skia / CanvasKit in Flutter Web? 【发布时间】：2021-02-11 10:40:59 【问题描述】：

我知道 Flutter 支持在 Flutter Web 中使用 Skia 而不是 DomCanvas，使用 WASM CanvasKit，即“Skia + WebAssembly”。

我听说这提供了显着的性能改进，但是我不知道如何启用它。

【问题讨论】：

【参考方案1】：

您可以通过提供 Dart 环境常量在 Flutter Web 中启用 CanvasKit / Skia：

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

flutter 工具现在有一个很好的快捷方式：

flutter run -d chrome --web-renderer canvaskit

--dart-define=FLUTTER_WEB_USE_SKIA=true 参数将设置常量以使用 Skia。您还需要将其提供给flutter build web:

flutter build web --web-renderer canvaskit

Learn more about web renderers in Flutter.

选项

three options 对应 --web-renderer:

auto (default) - 自动选择使用哪个渲染器。此选项在应用在移动浏览器中运行时选择 html 渲染器，在应用在桌面浏览器中运行时选择 CanvasKit 渲染器。 html - 始终使用 HTML 渲染器。 canvaskit - 始终使用 CanvasKit 渲染器。

请参阅Choosing which option to use 以决定您应该使用哪个选项。

替代方案

我上面描述的可以在flutter/engine/initialization.dart file中找到。请务必检查master 分支以查看信息是否仍然是最新的。

在那里，您可以看到配置 Flutter Web 以使用 CanvasKit 的其他选项：

`FLUTTER_WEB_AUTO_DETECT`

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

现在也可以使用：

--web-renderer auto

提供此常量将启用渲染器检测的自动检测：

CanvasKit 将用于桌面设备。 HTML 将用于移动设备。

仅当您不指定 window.flutterWebRenderer 时才适用。

window.flutterWebRenderer

如果您启用自动检测（见上文），您可以在 javascript 代码/HTML 文件中动态指定渲染器：

...

<script>
  // This sets the Flutter web renderer in auto detect mode.
  // See https://***.com/a/64583462/6509751.
  window.flutterWebRenderer = 'canvaskit';
</script>

<!-- This script installs service_worker.js to provide PWA functionality to
     application. For more information, see:
     https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
  var serviceWorkerVersion = null;
  ...

总结

在发现auto detect PR之后，非常感谢那里的现状总结如下：

如果启用了自动检测（由环境变量FLUTTER_WEB_AUTO_DETECT 设置），则允许开发人员将window.flutterWebRender 设置为canvaskit 或html 以选择渲染后端。如果未设置window.flutterWebRender，Flutter 引擎将在桌面设备上使用canvaskit，而在移动设备上使用html。如果window.flutterWebRender 设置为无效值（不是canvaskit 也不是html），它将默认为html。

如果禁用自动检测，它将检查环境变量FLUTTER_WEB_USE_SKIA 的值。如果为真，请使用canvaksit。否则，使用html。

【讨论】：

有没有办法检查我是在使用 HTML 还是 canvaskit 用于渲染部分？ @HappyHaris 在引擎中暴露为useCanvasKit（请参阅答案中的链接文件）。但是，我不确定如何在 Flutter 应用中导入引擎库。希望在网络浏览器的检查器中看到一个指示器。类似于 html 中的 flt-scene 标记。【参考方案2】：

如Web renderers documentation 中所述，这些是在 canvaskit 模式下构建/运行 Web 的有效命令：

flutter build web --web-renderer canvaskit

flutter run -d chrome --web-renderer canvaskit

--web-renderer 命令行选项采用三个值之一：auto、html 或 canvaskit。
auto（默认）- 自动选择要使用的渲染器。此选项在应用在移动浏览器中运行时选择 HTML 渲染器，在应用在桌面浏览器中运行时选择 CanvasKit 渲染器。 html - 始终使用 HTML 渲染器。 canvaskit - 始终使用 CanvasKit 渲染器。

【讨论】：

【参考方案3】：