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 - 桌面应用窗口化实战

相关推荐
neter.asia8 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫9 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年28 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_29 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891131 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾33 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu35 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym39 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫41 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫44 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js