Flutter桌面应用开发之配置Window特性

需求

1. 隐藏窗口的标题栏；
2. 监听窗口的退出键，弹出警示框；
3. 标题栏新增功能按钮；
4. 自定义标题栏，实现窗口的最大化、最小化、恢复为上一次的状态、关闭；
5. 实现类似微信的窗口置顶功能或者置底功能；
6. 设置窗口的最小尺寸，规避Flutter窗口空间不足的异常提示；
7. 设置窗口不可缩放；
8. 设置窗口任意位置可以拖动；
9. 设置窗口缩放的比例4:3；
10. 设置窗口的位置在左上方；

方案

依赖库

window_manager

支持平台

Windows, macOS & Linux

实现步骤

1. 在pubspec.yaml中添加依赖

dependencies:
  ...
 window_manager: ^0.3.7

2. 导入依赖

import 'package:flutter/material.dart';
import 'package:window_manager/window_manager.dart';

3. 初始化

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  //初始化 windowManager
  await windowManager.ensureInitialized();
  ...
  runApp(MyApp());
  }

4. 窗口属性配置

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  //初始化 windowManager
  await windowManager.ensureInitialized();
  WindowOptions windowOptions = const WindowOptions(
  minimumSize: Size(400, 300),//设置窗口的最小尺寸
  maximumSize: Size(800, 600),//设置窗口的最大尺寸
  //window 设置窗口的初始尺寸
  size: Size(800, 500),
  //窗口是否居中
  center: true,
  //设置窗口的背景色
  backgroundColor: Colors.transparent,
  //true 表示在状态栏不显示程序
  skipTaskbar: false,
 //true 表示设置Window一直位于最顶层
  alwaysOnTop: false,
  //hidden 表示隐藏标题栏 normal 显示标题栏
  titleBarStyle: TitleBarStyle.normal,
  //设置窗口的标题，
  title: "WindowSettingTest",
);
windowManager.waitUntilReadyToShow(windowOptions, () async {
  //显示窗口
  await windowManager.show();
  //聚焦窗口
  await windowManager.focus();
  //ture设置窗口不可缩放 false 设置窗口可以缩放
  windowManager.setResizable(true); 
  //设置窗口缩放宽高比
  windowManager.setAspectRatio(1.3); 
  //设置窗口是否支持阴影
  windowManager.setHasShadow(true);
  //设置窗口模式：亮色模式和暗色模式
  windowManager.setBrightness(Brightness.dark);
});
  runApp(MyApp());
  }

5. windowManager 支持的重要功能

• 设置窗口任意位置可以拖动

DragToMoveArea 包裹的区域是支持拖动的

Widget build(BuildContext context) {
  return const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      backgroundColor: Colors.transparent,
      body: DragToMoveArea(
        child: Column(mainAxisSize: MainAxisSize.max, children: [
          TitleBarWidget(),
          Expanded(child: WindowBodyWidget()),
        ]),
      ),
    ),
  );

• 监听窗口的退出键，弹出警示框

混入WindowListener->监听Window事件->配置Window关闭按钮可拦截->重写Window的close事件；

class _MyHomePageState extends State<MyHomePage> with WindowListener {

  @override
  void initState() {
    super.initState();
    //监听Window事件
    windowManager.addListener(this);
    //配置Window关闭按钮可拦截
    windowManager.setPreventClose(true);
  }


  @override
  void dispose() {
    windowManager.removeListener(this);
    super.dispose();
  }

  @override
  void onWindowEvent(String eventName) {
    print("event:$eventName");
    super.onWindowEvent(eventName);
  }

  @override
  void onWindowBlur() {
    print("onWindowBlur");
    super.onWindowBlur();
  }

 //重写Window的close事件
  @override
  void onWindowClose() async {
    var isPreventClose = await windowManager.isPreventClose();
    if (!context.mounted) return;
    if (isPreventClose) {
      print("custom close  action");
      showDialog(
          context: context,
          builder: (_) {
            return AlertDialog(
              title: const Text("提示"),
              actions: [
                TextButton.icon(
                    onPressed: () {
                      Navigator.of(context).pop();
                      windowManager.destroy();
                    },
                    icon: const Icon(Icons.close),
                    label: const Text("确认")),
                TextButton.icon(
                    onPressed: () {
                      print("取消");
                      Navigator.of(context).pop();
                      var height = MediaQuery.of(context).size.height;
                      var width = MediaQuery.of(context).size.width;
                      print("size:${MediaQuery.of(context).size}");
                      print("size:${window.physicalSize}");
                      print("size:${MediaQuery.of(context).devicePixelRatio}");
                      print(
                          "size:height${MediaQuery.of(context).devicePixelRatio * height},width:${MediaQuery.of(context).devicePixelRatio * width}");
                    },
                    icon: const Icon(Icons.remove),
                    label: const Text("取消")),
              ],
            );
          });
    } else {
      print("use system close action");
    }
    print("onWindowClose");
    super.onWindowClose();
  }

  @override
  void onWindowDocked() {
    print("onWindowDocked");
    super.onWindowDocked();
  }

  @override
  void onWindowEnterFullScreen() {
    print("onWindowEnterFullScreen");
    super.onWindowEnterFullScreen();
  }

  @override
  void onWindowFocus() {
    // TODO: implement onWindowFocus
    super.onWindowFocus();
    print("onWindowEnterFullScreen");
    setState(() {});
  }

  @override
  void onWindowLeaveFullScreen() {
    // TODO: implement onWindowLeaveFullScreen
    super.onWindowLeaveFullScreen();
    print("onWindowLeaveFullScreen");
  }

  @override
  void onWindowMaximize() {
    // TODO: implement onWindowMaximize
    super.onWindowMaximize();
    print("onWindowMaximize");
  }

  @override
  void onWindowMinimize() {
    // TODO: implement onWindowMinimize
    super.onWindowMinimize();
    print("onWindowMinimize");
  }

  @override
  void onWindowMove() {
    // TODO: implement onWindowMove
    super.onWindowMove();
    print("onWindowMove");
  }

  @override
  void onWindowMoved() {
    // TODO: implement onWindowMoved
    super.onWindowMoved();
    print("onWindowMove");
  }

  @override
  void onWindowResize() {
    // TODO: implement onWindowResize
    super.onWindowResize();
    print("onWindowResize");
  }

  @override
  void onWindowResized() {
    // TODO: implement onWindowResized
    super.onWindowResized();
    print("onWindowResized");
  }

  @override
  void onWindowRestore() {
    // TODO: implement onWindowRestore
    super.onWindowRestore();
    print("onWindowRestore");
  }

  @override
  void onWindowUndocked() {
    // TODO: implement onWindowUndocked
    super.onWindowUndocked();
    print("onWindowUndocked");
  }

  @override
  void onWindowUnmaximize() {
    // TODO: implement onWindowUnmaximize
    super.onWindowUnmaximize();
    print("onWindowUnmaximize");
  }

• 标题栏新增功能按钮及自定义标题栏，实现窗口的最大化、最小化、恢复为上一次的状态、关闭；

隐藏原有标题栏->自定义标题栏->调用Window API实现相关API

class _TitleBarWidgetState extends State<TitleBarWidget> {
  @override
  Widget build(BuildContext context) {
    var iconSize = const Size(14, 14);
    var backgroundSize = const Size(30, 30);
    var maxButtonIcons = WindowButtonIcons(
        SvgPicture.asset('assets/images/max.svg'),
        SvgPicture.asset('assets/images/max.svg'),
        SvgPicture.asset('assets/images/max.svg'));

    var minButtonIcons = WindowButtonIcons(
        SvgPicture.asset('assets/images/min.svg'),
        SvgPicture.asset('assets/images/min.svg'),
        SvgPicture.asset('assets/images/min.svg'));
    var closeButtonIcons = WindowButtonIcons(
        SvgPicture.asset('assets/images/close.svg'),
        SvgPicture.asset('assets/images/close_down.svg'),
        SvgPicture.asset('assets/images/close_mouse_over.svg'));
    return Container(
      padding: EdgeInsets.all(titleBarTopAndBottomMargin),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
        //可拖动区域
          Expanded(
              child: DragToMoveArea(
                child: Container(),
              )),
         // 可任意添加其他功能按钮     
           ...
              
          //自定义最小化按钮
          MinimizeWindowButton(
            backgroundSize:backgroundSize,
            iconSize:iconSize,
            icons: minButtonIcons,
          ),
          //自定义最大化按钮
          MaximizeWindowButton(
            backgroundSize:backgroundSize,
            iconSize: iconSize,
            icons: maxButtonIcons,
            // onPressed: (){
            //   updateRegistryTest(true);
            // },
          ),
          //自定义关闭窗口按钮
          CloseWindowButton(
            backgroundSize: backgroundSize,
            iconSize: iconSize,
            icons: closeButtonIcons,
          ),
        ],
      ),
    );
  }
}

windowManager.maximize()   窗口最大化
windowManager.minimize()  窗口最小化
windowManager.restore() 窗口恢复到之前状态
windowManager.setAlwaysOnTop()  设置窗口置顶
windowManager.setAlwaysOnBottom()  设置窗口置底
windowManager.close() 关闭窗口
 windowManager.destroy() 强制销毁窗口