Dart 如何在 Flutter Web 中使用 SkiaCanvasKit

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

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

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

flutter run -d chrome --web-renderer canvaskit

100参数将设置常数以使用Skia.您还需要将其提供给flutter build web:

flutter build web --web-renderer canvaskit

Learn more about web renderers in Flutter

选项

--web-renderer件中有three options件:

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

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

替代方案

我上面描述的东西可以在flutter/engine/initialization.dart file里找到.一定要判断master分支，看看信息是否仍然是最新的.

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

Flutter _卷筒_自动_检测

--dart-define=Flutter _卷筒_自动_检测=true

现在还可以使用以下工具完成此操作:

--web-renderer auto

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

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

只有在未指定window.flutterWebRenderer的情况下，这一点才适用.

如果启用自动检测(请参见上文)，则可以在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 _卷筒_自动_检测设置)，则允许开发人员将window.flutterWebRender设置为canvaskit或html以 Select 渲染后端. 如果未设置window.flutterWebRender，则Flutter 引擎将使用canvaskit作为桌面设备，而使用html作为移动设备. 如果window.flutterWebRender设置为无效值(既不是canvaskit也不是html)，它将默认为html.

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