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

Question

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

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

Answer 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

了解有关Flutter 中的 Web 渲染器的更多信息。

选项

有三个选项为--web-renderer：

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

请参阅选择要使用的选项来决定您应该使用哪个选项。

备择方案

我上面描述的内容可以在flutter/engine/initialization.dart文件中找到。确保检查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 文件中动态指定渲染器：

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

概括

在发现自动检测 PR 之后，我非常感谢那里对当前情况的以下总结：

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

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

Answer 2

如Web 渲染器文档中所述，这些是在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 渲染器。