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

bzzcjhmw  于 2023-03-04  发布在  Flutter
关注(0)|答案(4)|浏览(364)

我知道Flutter支持在Flutter Web中使用Skia而不是DomCanvas,使用WASM CanvasKit,即“Skia + WebAssembly”。
我听说这可以显著提高性能,但是我不知道如何启用它。

ss2ws0br

ss2ws0br1#

您可以通过提供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.

选项

--web-renderer有三个选项:

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

请参阅 * 选择要使用的选项 * 以确定应使用的选项。

替代品

我上面描述的内容可以在flutter/engine/initialization.dart file中找到,一定要检查master分支,看看这些信息是否仍然是最新的。
在那里,您可以看到配置Flutter Web以使用CanvasKit的其他选项:

一米九一x

--dart-define=FLUTTER_WEB_AUTO_DETECT=true

现在也可以使用以下方法完成:

--web-renderer auto

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

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

仅当未指定window.flutterWebRenderer时才成立。
x1米11米1x
如果启用了自动检测(见上),您可以在JavaScript代码/HTML文件中动态指定渲染器:

...

<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;
  ...

总结

在发现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

oo7oh9g9

oo7oh9g92#

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渲染器。
kqqjbcuj

kqqjbcuj3#

本地运行

滑雪

flutter run -d Chrome --dart-define=FLUTTER_WEB_USE_SKIA=true --release

带帆布套件

flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_URL=true --release
flutter run -d Chrome --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_CPU_ONLY=true --release

cgh8pdjw

cgh8pdjw4#

您还可以在运行时强制执行将以下内容添加到您的web/index.html

window.addEventListener('load', function (ev) {
        // Download main.dart.js
        _flutter.loader.loadEntrypoint({
          serviceWorker: {
            serviceWorkerVersion: serviceWorkerVersion,
          },
          onEntrypointLoaded: async function(engineInitializer) {

        // Configure the engine options
        let engineOptions = new _flutter.JsFlutterConfiguration();
        engineOptions.renderer = "canvaskit";

        // Initialize the Flutter engine
        let appRunner = await engineInitializer.initializeEngine(engineOptions);

        // Run the app
        await appRunner.runApp();
      }
    });
  });

以下是web rendererscustomizing web app initialization的文档。

相关问题