如何在Flutter Web中使用Skia/CanvasKit? [英] How to use Skia / CanvasKit in Flutter Web?

问题描述

我知道Flutter支持使用WASM CanvasKit ，即"Skia + WebAssembly".

I know that Flutter supports using Skia instead of DomCanvas in Flutter Web using WASM CanvasKit, i.e. "Skia + WebAssembly".

我听说这可以显着提高性能，但是，我不知道如何启用它.

I have heard that this provides significant performance improvements, however, I do not know how to enable it.

推荐答案

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

You can enable CanvasKit / Skia in Flutter Web by supplying a Dart environment constant:

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

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

The flutter tools now have a good shortcut for it:

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-renderer :

• 自动(默认)-自动选择要使用的渲染器.当应用程序在移动浏览器中运行时，此选项选择HTML渲染器；当应用程序在台式机浏览器中运行时，选择CanvasKit渲染器.
• html -始终使用HTML渲染器.
• canvaskit -始终使用CanvasKit渲染器.

• auto (default) - automatically chooses which renderer to use. This option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.
• html - always use the HTML renderer.
• canvaskit - always use the CanvasKit renderer.

请参见 选择哪个选项使用 来决定应该使用哪个选项.

See Choosing which option to use to decide about which option you should be using.

我上面所述的内容可以在 flutter/engine/initialization.dart 文件.确保检查 master 分支以查看信息是否仍是最新的.

What I described above can be found in the flutter/engine/initialization.dart file. Make sure to check the master branch to see if the information is still up-to-date.

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

In there, you can see other options of configuring Flutter Web to use CanvasKit:

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

现在也可以使用:

--web-renderer auto

提供此常量将启用自动检测以进行渲染器检测:

Supplying this constant will enable auto detect for the renderer detection:

• CanvasKit将在桌面设备上使用.
• HTML将在移动设备上使用.

仅当您未指定 window.flutterWebRenderer 时，此情况才成立.

This only holds true if you do not specify window.flutterWebRenderer.

如果启用了自动检测功能(请参见上文)，则可以在JavaScript代码/HTML文件中动态指定渲染器:

Iff you enable auto detect (see above), you can specify the renderer in your JavaScript code / HTML file dynamically:

...

<script>
  // This sets the Flutter web renderer in auto detect mode.
  // See https://stackoverflow.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;
  ...

摘要

发现自动检测PR 后，我非常感谢以下内容的摘要那里的当前情况:

Summary

After discovering the auto detect PR, I really appreciate the following summary of the current situation in there:

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

If auto detect is enabled (set by environment variable FLUTTER_WEB_AUTO_DETECT), developers will be allowed to set window.flutterWebRender to either canvaskit or html to select the rendering backend. If window.flutterWebRender is not set, flutter engine will use canvaskit for desktop device while using html for mobile device. If window.flutterWebRender is set to an invalid value (not canvaskit nor html), it will default to html.

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

If auto detect is disabled, it will check the value of environment variable FLUTTER_WEB_USE_SKIA. If true, use canvaksit. Otherwise, use html.

这篇关于如何在Flutter Web中使用Skia/CanvasKit?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！