全方位剖析 Flutter Windows 内测版

2,974 阅读8分钟

Flutter 最被我们所津津乐道的功能就是能实现 Android 和 iOS 上的开发统一,目前,Google 也已经先后发布了 8 个稳定版,在这两个移动平台上提供了各方面的支持,据不完全统一,Flutter 开发者已经向 Google Play 商店提交了 100,000 多款应用,数字还是挺惊人的。

但是 Flutter 团队也一直在扩展他们的视野,没准备放过 Web 平台和桌面操作系统,此前,一直在关注 Flutter 发展动向的同学也一定尝鲜了 Flutter 在 MacOs 和 Linux 上的支持,9 月 23 号,Flutter 项目的 Google 产品经理克里斯·塞尔斯(Chris Sells)也在 Medium 上的帖子公开表示未来将致力于 Flutter 对 Windows 平台的支持。

支持 Windows 系统原因?

Windows 依然是台式机和笔记本电脑最常用的操作系统,不久前,Microsoft 也宣布已经有超过十亿台运行 Windows 10 的硬件设备了。我们自己的统计数据也显示,有超过一半的 Flutter 开发者正使用 Windows,因此,它很自然的成为了 Flutter 的下一个目标。对桌面应用的支持也能为 Flutter 开辟了更多激动人心的可能性,包括开发人员工具的改进,减少了新用户的负担等等,当然,我们的核心目的仍然是“一套代码,支持任何设备”。

Flutter 能为 Windows 带来什么?

Flutter 团队一直遵守的原则是 “改善性能,拥抱差异”,因此我们总是以优化引擎为核心,为每个特定平台都提供合适的拓展。在移动设备上,我们致力于对 Material Design 的支持,希望尽可能的构建出以移动设备为中心的用户界面。而在其他平台(如 Web、Linux、Windows)上我们也是如此,Flutter 团队会开发一整套全新的服务,其中包括对键盘,鼠标,鼠标滚轮和控制器的特性支持,以及更多定制化的 UI 组件来适应 Web和桌面应用程序的大尺寸。

除了对 Flutter 框架和引擎本身的修改,每支持一个新平台还会影响很多其他方面:

  • 工具链的更新:向 CLI 和 IDE 工具添加新的支持(Windows)
  • Shell:通过 WM_ * 消息机制处理 Windows 的输入,并通过 ANGLE 输出,而 ANGLE 使用 Skia 以原生速度渲染到基础 DirectX 表面
  • Runner:每个项目都会有针对目标平台的 Shell 程序。对于Windows,会有一个Win32 / C++程序,可加载 Flutter 代码并在运行时执行它。如果需要,可以在此处向应用程序添加本机代码。
  • 插件:插件可以实现 Dart 代码和原生的混合开发。可以为在 Windows 上 Flutter 应用程序中编译的每个插件添加该本地代码。

Flutter 团队对社区有哪些支持?

为了向公众预演 Flutter 桌面端的能力,Flutter 团队先前已经与 gskinner.com 团队共同开发了一款 Flokk 应用。Flokk 是一款能够与用户的 Google Contacts 数据配合使用并展示 GitHub 和 Twitter 上联系人动态的应用程序,如下图所示。

Flokk
Flokk

如果想在 Windows 上使用 Flokk 应用程序,可以直接在 GitHub上下载 最新版本。如果您想了解构建 gskinner 应用的具体过程,可以参阅其博客文章:Flokk – How we built a Desktop App Using Flutter

此外,Flutter Gallery 应用最近也已完全重写来增加对台式机尺寸的支持。现在,开发者完全可以自行运行它来体验 Flutter 是否可以在 Web 以及 Windows,macOS 和 Linux 上正常运行。

Flutter Gallery
Flutter Gallery

该项目代码可在GitHub上找到

即使刚刚发布 Alpha 版,Flutter 社区也已经开始着手开发 Windows 平台的各个功能插件了:

这些插件中的大多数也支持其他 Flutter 平台,开发者可以将这些功能统一运行在 Android,iOS,Web 等以及 Windows 上。此外,虽然 pub.dev 上约有三分之一的可用软件包是具有特定于平台的代码的插件,但毕竟大多数不是,例如,许多最高质量和最常用的软件包 是 Flutter Favorite 程序的一部分,它们大多数都可以在 Windows 上运行。如果要查看所有能够在 Windows 上运行的库,可以直接在pub.dev上查询

pub.dev
pub.dev

Windows 应用初体验

要使用 Flutter 开发 Windows 桌面应用,首先需要安装官网 Desktop 文档 中介绍的开发工具。默认情况下,Flutter 项目中并不会配置 Windows 项目程序在 Flutter 项目中。开发者可以在终端执行下述命令:

$ flutter channel dev
$ flutter upgrade
$ flutter config --enable-windows-desktop

第一条命令会将 Flutter 设置为使用 Flutter 开发版的代码(默认为稳定“ stable” 版)。这时,开发者就可以使用仍在内侧的功能,例如 Windows。第二行代码会将开发版的最新代码下载到本地以供我们使用。第三个命令则是设置允许在你的 PC 上进行 Windows 应用的开发。

设置好之后,每次使用 Android StudioVisual Studio Code,或者从命令行创建新的 Flutter 应用程序时,都会默认创建一个 Windows 子文件夹了。

我们可以在 Windows 平台下运行默认的计数器应用,如下所示:

如何与 Windows 原生交互?

开发者也可以为 Flutter Windows 平台开发自己的插件。进入 dev channel ,在终端执行以下命令:

flutter create --template plugin --platforms Windows hello_plugin

这是,你就可以创建出一个插件项目,并在 lib 子文件夹中编写 Dart 代码,Windows 原生代码被放在 windows 子文件夹中,你可以通过 Platform Channels 在它们之间进行通信,它的原理就是基于 Dart 和 C++ 代码之间传递的消息。关于开发插件的具体编码方式,请参见url_launcher实现

除了 Platform Channels,如果开发者需要,也可以使用 Dart FFI(外部功能接口) 加载库并调用 C 类风格的 API,例如 Win32 API。与使用 Platform Channels 的 url_launcher 不同,path_provider 插件就是使用 FFI 实现的,打开 GitHub repo,你可以看到 FFI 无需在Dart 和 C++ 之间来回切换,而可以直接编写代码导入所需的 API 即可,下面这一段就是 Dart 调用 MessageBox API 的样例代码:

typedef MessageBoxNative = Int32 Function(
  IntPtr hWnd, 
  Pointer<Utf16> lpText, 
  Pointer<Utf16> lpCaption,
  Int32 uType
);

typedef MessageBoxDart = int Function(
  int hWnd, 
  Pointer<Utf16> lpText, 
  Pointer<Utf16> lpCaption, 
  int uType
);

final user32 = DynamicLibrary.open('user32.dll');

final win32MessageBox =
  user32.lookupFunction<MessageBoxNative, MessageBoxDart>('MessageBoxW');

void showMessageBox(String message, String caption) =>
  win32MessageBox(
    0, // No owner window
    Utf16.toUtf16(message), // Message
    Utf16.toUtf16(caption), // Window title
    0 // OK button only
  );

...

// call just like any other Dart function
showMessageBox('Test Message', 'Window Caption');

FFI 最明显的好处是不会产生在平台通道之类的两个线程之间进行转换的开销,而且还包括对许多不同种类的 API 的支持,包括 Win32,WinRT 和 COM。需要注意的是,在运行打包整个基于 C 的 Windows API 之前,需要先核实 win32插件,该插件已经可以很好地做到这一点。另外,path_provider 插件本身是使用 win32 插件实现的。有关 win32 插件如何开发以及如何工作的详细信息,可以查看博客文章 Windows fun with Dart FFI

如何学习 Flutter Windows?

Flutter Desktop 文档中含有最新关于桌面版的官方信息。另外,开发者们也可以在 Google 实验室中学习如何构建 Flutter 桌面应用,这里面包括了使用 OAuth 进行身份验证,访问 GitHub API、使用 GraphQL 等等。

此外,除了上述提到的示例,开发者们也可以参考 desktop_photo_search 学习桌面级组件的使用方式。

我们还推荐使用 菜单栏插件NavigationRail 组件DataTable 组件 等等一系列适合桌面开发的组件,InteractiveViewer 组件 也完全支持桌面级应用,它可实现通过鼠标手势来平移和缩放子组件。

已经被 Windows 开发社区广泛使用的,用于创建图表,仪表,数据网格等这些组件,也可以在 SyncFusion 找到,如下图。

Flutter 的下一步?

目前,Flutter Alpha 版已经发布,之后,我们会将注意力主要集中在功能的完善和稳定版产品的发布上。作为一个开源项目,各位开发者都可以 GitHub 上持续关注我们的进展,还未完成的其他工作包括可访问性,全球化和本地化,增强的键盘和文本处理,对命令行参数的支持等等,一切都还待加强。

除了支持经典的 Win32 API 外,我们也还在试验 基于UWP的Flutter shell版本 ,该版本能够让 Flutter 可以访问更多的基于 Windows 的设备,包括 Xbox。作为该实验的一部分,本周我们就会向 Windows应用商店 发布了基于UWP的 Flutter Gallery 版本。

下图展示了在 Xbox 上运行的基于 UWP 的 Flutter Gallery:

同样的应用也可以展示在双屏 Windows 设备上;

延伸阅读

Announcing Flutter Windows Alpha - Chris Sells

Flutter Desktop

我的博客原文:meandni.com/2020/09/28/…

关注公众号「Meandni」,及时阅读移动开发技术和最新技术动态。