返回

Flutter 桌面端开发中遇“坑”记

前端


钉钉 Flutter 业务灰度期间,我们曾在桌面端遇到并处理了一些 FlutterEngine 层面的 Bug。本文将解析这些 Bug,以供广大开发者参考。



桌面端 Flutter 使用环境

在开始之前,我们先简单介绍一下 Flutter 桌面端的开发环境。Flutter 桌面端基于原生 App 和 Embedder(即宿主)两个部分,通过与 Flutter 引擎进行通信实现 Flutter 应用程序的运行。


在 Embedder 中,Flutter 引擎可以通过两种方式与 Flutter 应用程序进行通信:


  • Flutter Native View Channel(通道): 用于通信数据。
  • Flutter Plugin(插件): 用于原生代码的调用。

原生 App 与 Embedder 的通信方式也分为两种:


  • 通过二进制消息(Binary Messages): Android 平台使用这种方式。
  • 通过平台信道(Platform Channels): iOS 和 macOS 平台使用这种方式。

桌面端 Flutter 开发遇到的坑

在开发过程中,我们主要遇到了以下几个 Bug:


1. 窗口背景图没有自适应缩放

在桌面端,Flutter 应用程序的窗口默认是不缩放的。这会导致窗口背景图在不同屏幕分辨率下显示不全或变形。


要解决这个问题,我们需要在 Embedder 中实现窗口大小变更事件的监听,并在窗口大小变更时调整窗口背景图的大小。


2. 鼠标滚动导致窗口抖动

在桌面端,当用户使用鼠标滚动窗口时,可能会出现窗口抖动的问题。这是因为 Flutter 在处理鼠标滚动事件时,会不断地重新绘制窗口。


要解决这个问题,我们需要在 Embedder 中对鼠标滚动事件进行处理,并只在必要时重新绘制窗口。


3. 拖动窗口时,窗口内容闪烁

在桌面端,当用户拖动窗口时,可能会出现窗口内容闪烁的问题。这是因为 Flutter 在处理窗口拖动事件时,会不断地重新绘制窗口。


要解决这个问题,我们需要在 Embedder 中对窗口拖动事件进行处理,并只在必要时重新绘制窗口。


总结

以上便是我们在桌面端 Flutter 开发过程中遇到的几个 Bug。希望这些经验对广大开发者有所帮助。


在开发过程中,我们发现 Flutter 桌面端的开发环境相对复杂,而且存在一些 Bug。希望 Flutter 团队能够尽快修复这些 Bug,并提供更加友好的开发环境。