Flutter桌面端-窗口适配经验分享

前言

以目前的情况来看,Flutter的桌面端软件其实跟移动端软件很像,因为Flutter桌面端目前默认只有一个窗口,而不是像原生的桌面端软件一样,经常会有很多个窗口。

比较不一样的是,移动端是直接全屏显示,桌面端的软件是以窗口的形式存在的。

而桌面端窗口大小可以设置,还可以由用户自由放大缩小。

所以一般桌面端软件都需要对窗口做一些配置,比如设置启动时的默认窗口大小以达到最佳的界面显示,设置最小的窗口大小来避免界面变形严重或者遮盖了重要界面等等。

另外某些应用还会有关闭前确认,监听窗口活跃情况,自定义窗口标题栏之类的需求。

插件选择

像这种窗口相关的需求,Flutter原生并没有提供比较好的支持。目前使用比较多的是两个插件,window_managerbitsdojo_window

这两个库的功能差不多,基本的窗口设置都有,而且都支持MacOSWindowsLinux系统。而且大部分情况下只需要在dart层处理,用起来还算简单。

我最后选择的是window_manager

一是bitsdojo_window这个库感觉维护不太上心,几个月才维护一次,而window_manager维护要勤快得多。

二是window_manager是国内的learnFlutter开源组织开发维护的,有比较好的中文文档,而且这种不相伯仲的情况,果断支持下国内的大佬。

实践分享

window_manager有较完善的中文文档,具体可查看 README-ZH.md

我主要是分享项目中用到的一些功能。

基本窗口设置

如下面的代码的所示,window_manager通过配置WindowOptions可以设置默认窗口大小,最小窗口大小,设置窗口居中显示,设置窗口的标题等。

dart 复制代码
import 'package:flutter/material.dart';
import 'package:window_manager/window_manager.dart';
 
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
 
  // 必须加上这一行。
  await windowManager.ensureInitialized();
  WindowOptions windowOptions = const WindowOptions(
    size: Size(600, 400), // 设置默认窗口大小
    minimumSize: Size(300, 220), // 设置最小窗口大小
    center: true, // 设置窗口居中
    title: "window_manager测试Demo", // 设置窗口标题
  );
  windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
  });
 
  runApp(const MyApp());
}

如下图一是启动后默认的窗口大小,图二是最小的缩放窗口。当然默认是可以缩放到屏幕大小的,还可以最小化,不赘述。

窗口状态监听

通过注册监听器可以监听Windows的各种状态。我们可以在回调里面做一些自己的事情。

dart 复制代码
class _MyHomePageState extends State<MyHomePage> with WindowListener {
  @override
  void initState() {
    super.initState();
    // 注册windowManager监听器
    windowManager.addListener(this);
  }
 
  @override
  void dispose() {
    // 移除windowManager监听器
    windowManager.removeListener(this);
    super.dispose();
  }
 
  // === WindowListener回调 ===
 
  // 窗口准备关闭时触发
  @override
  void onWindowClose() {
    // 窗口关闭前做一些操作。
    // 我是关闭了adb服务。否则adb服务会一直在运行。
    debugPrint("onWindowClose");
    super.onWindowClose();
  }
 
  // 窗口获得焦点时触发(比如去浏览器看文章后回来点击本App的窗口)
  @override
  void onWindowFocus() {
    // 获得焦点时做一些处理。我是用于记录记录用户操作,方便后续查找问题及统计活跃情况。
    debugPrint("onWindowFocus");
    super.onWindowFocus();
  }
 
  // 窗口失去焦点时触发(比如去浏览器看文章了,焦点就不在本App了)
  @override
  void onWindowBlur() {
    // 失去焦点时做一些处理。我是用于记录记录用户操作,方便后续查找问题及统计活跃情况。
    debugPrint("onWindowBlur");
    super.onWindowBlur();
  }
 
  // === WindowListener回调 ===
}

设置应用高度占满屏幕

我做的另外的一个桌面应用,界面基本上是跟移动端一致的。而且首页是一个列表,所以想要尽量让启动后应用的高度占满屏幕。

这个需求一开始打算使用window_manager插件来实现,但是发现达不到想要的效果。

后面发现learnFlutter还有一个开源库是screen_retriever ,这个插件允许 Flutter 桌面 应用检索关于屏幕大小,显示,光标位置等信息。

试了下确实可以获取到屏幕的高度,所以实现方式是使用screen_retriever获取到屏幕的高度之后再使用window_manager 设置窗口大小。

dart 复制代码
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
 
  // 必须加上这一行。
  await windowManager.ensureInitialized();
 
  // 获取屏幕可用大小
  Display primaryDisplay = await screenRetriever.getPrimaryDisplay();
  // 获取屏幕可用高度
  var windowHeight = primaryDisplay.visibleSize?.height ?? 820;
 
  WindowOptions windowOptions = WindowOptions(
    // size: Size(600, 400), // 设置默认窗口大小
    size: Size(600, windowHeight), // 设置默认窗口大小
    minimumSize: const Size(300, 220), // 设置最小窗口大小
    center: true, // 设置窗口居中
    title: "window_manager测试Demo", // 设置窗口标题
  );
  windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
  });
 
  runApp(const MyApp());
}

参考

本文Demo
window_manager bitsdojo_window screen_retriever
learnFlutter
Flutter - 桌面应用窗口化实战

相关推荐
程序猿阿伟6 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒8 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪16 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背19 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M30 分钟前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放38 分钟前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js
想自律的露西西★1 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳1 小时前
vue3:瀑布流
前端·javascript·vue.js
Jinkey1 小时前
FlutterBasic - GetBuilder、Obx、GetX<Controller>、GetxController 有啥区别
android·flutter·ios
霍先生的虚拟宇宙网络2 小时前
webp 网页如何录屏?
开发语言·前端·javascript