Flutter + window_manager：构建你的 macOS 桌面 OS 级应用模板
在移动端 Flutter 大放异彩的今天，桌面端支持已成为其重要的发展方向。特别是对于 macOS 平台，Flutter 提供了一流的渲染性能和原生体验。但仅仅将移动端 UI 搬到桌面是不够的，我们需要处理窗口管理、系统菜单、多窗口交互等桌面特有的复杂性。本文将从一个实战全栈工程师的视角，带你从零构建一个具有 OS 级外观和交互的 macOS 桌面应用模板。我们将深度结合 window_manager 包，实现自定义标题栏、窗口缩放、系统托盘等核心功能，并提供一个清晰、可扩展的代码架构。### 为什么需要 window_manager？Flutter 官方的 flutter_window 并未提供完整的窗口控制能力（如隐藏标题栏、自定义最小化/最大化按钮等）。而 window_manager 是一个社区强大的插件，它允许我们：- 隐藏系统原生标题栏，实现自定义 UI- 精确控制窗口大小、位置、最小尺寸- 监听窗口焦点、移动、缩放事件- 与系统托盘集成- 实现窗口的置顶、全屏等高级功能实战第一步：项目初始化与依赖配置 首先，创建一个新的 Flutter 项目，并添加 window_manager 依赖。bashflutter create --platforms=macos flutter_desktop_oscd flutter_desktop_osflutter pub add window_manager在 macos/Runner/AppDelegate.swift 中，我们需要在应用启动时初始化 window_manager：swiftimport Cocoaimport FlutterMacOSimport window_manager@mainclass AppDelegate: FlutterAppDelegate { override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool { return true } override func applicationDidFinishLaunching(_ notification: Notification) { // 初始化 window_manager 插件 WindowManagerPlugin.register(with: self.registrar(forPlugin: "WindowManagerPlugin")) super.applicationDidFinishLaunching(notification) }}### 构建核心窗口管理服务一个健壮的 OS 模板，必须有集中管理窗口状态的代码。我们将创建一个 WindowService 单例，封装所有窗口操作。代码示例 1： window_service.dart dartimport 'package:window_manager/window_manager.dart';class WindowService with WindowListener { // 单例模式 static final WindowService _instance = WindowService._internal(); factory WindowService() => _instance; WindowService._internal(); /// 初始化窗口监听和基础配置 Future<void> init() async { await windowManager.ensureInitialized(); // 设置窗口选项：使用自定义标题栏，设置最小尺寸 const windowOptions = WindowOptions( size: Size(1280, 800), minimumSize: Size(900, 600), center: true, title: 'Flutter OS', titleBarStyle: TitleBarStyle.hidden, // 关键：隐藏系统标题栏 backgroundColor: Colors.transparent, ); await windowManager.waitUntilReadyToShow(windowOptions, () async { await windowManager.show(); await windowManager.focus(); }); // 注册为窗口监听器 windowManager.addListener(this); } // ---- 以下为常用的窗口操作方法 ---- Future<void> minimize() => windowManager.minimize(); Future<void> maximize() => windowManager.maximize(); Future<void> unmaximize() => windowManager.unmaximize(); Future<void> close() => windowManager.close(); // 判断当前是否最大化 Future<bool> isMaximized() => windowManager.isMaximized(); // ---- 窗口事件回调（来自 WindowListener）---- @override void onWindowMaximize() { // 可以在这里更新 UI 状态，例如切换最大化/还原图标 print('窗口已最大化'); } @override void onWindowUnmaximize() { print('窗口已还原'); } @override void onWindowFocus() { // 窗口聚焦时，可以刷新视觉效果 print('窗口获得焦点'); } @override void onWindowBlur() { print('窗口失去焦点'); }}### 设计仿 macOS 的标题栏 UI现在关键部分来了：由于我们隐藏了原生标题栏，必须自己绘制一个可拖动的标题栏，包含交通灯按钮（红黄绿）。我们需要使用 DraggableArea 来让这个区域可拖动窗口。代码示例 2： custom_title_bar.dart dartimport 'package:flutter/material.dart';import '../services/window_service.dart';class CustomTitleBar extends StatelessWidget { final WindowService _windowService = WindowService(); CustomTitleBar({super.key}); @override Widget build(BuildContext context) { return Container( height: 48, // 固定高度 decoration: const BoxDecoration( gradient: LinearGradient( colors: [Color(0xFFEDEDED), Color(0xFFDCDCDC)], begin: Alignment.topCenter, end: Alignment.bottomCenter, ), ), child: Row( children: [ // 左侧交通灯按钮 const SizedBox(width: 12), _TrafficLightButton( color: Colors.red, onTap: () => _windowService.close(), ), const SizedBox(width: 8), _TrafficLightButton( color: Colors.yellow, onTap: () => _windowService.minimize(), ), const SizedBox(width: 8), _TrafficLightButton( color: Colors.green, onTap: () { // 处理最大化/还原 _windowService.isMaximized().then((isMax) { if (isMax) { _windowService.unmaximize(); } else { _windowService.maximize(); } }); }, ), // 中间标题（也可以放置自定义菜单） const Expanded( child: Center( child: Text( 'Flutter OS', style: TextStyle( fontSize: 14, fontWeight: FontWeight.w600, color: Colors.black87, ), ), ), ), // 右侧预留空间（可放搜索框或状态图标） const SizedBox(width: 100), ], ), ); }}/// 单个交通灯按钮class _TrafficLightButton extends StatelessWidget { final Color color; final VoidCallback onTap; const _TrafficLightButton({required this.color, required this.onTap}); @override Widget build(BuildContext context) { return GestureDetector( onTap: onTap, child: Container( width: 14, height: 14, decoration: BoxDecoration( color: color, shape: BoxShape.circle, boxShadow: [ BoxShadow( color: Colors.black.withOpacity(0.2), blurRadius: 2, offset: Offset(0, 1), ), ], ), ), ); }}重点提示： 要让标题栏可拖动，需要在 main.dart 中，将整个 CustomTitleBar 包裹在 WindowDragToMoveArea 中，或者使用 DraggableArea。我们会在主界面中整合。### 组装主界面与桌面布局现在我们将标题栏和内容区组合起来，形成一个完整的桌面应用框架。这里我们模拟一个简单的桌面，包含一个 Dock 栏。代码示例 3： main.dart 整合 dartimport 'package:flutter/material.dart';import 'package:window_manager/window_manager.dart';import 'services/window_service.dart';import 'widgets/custom_title_bar.dart';void main() async { WidgetsFlutterBinding.ensureInitialized(); // 初始化窗口服务 await WindowService().init(); runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter OS', debugShowCheckedModeBanner: false, theme: ThemeData( brightness: Brightness.light, fontFamily: 'SF Pro Display', scaffoldBackgroundColor: Colors.grey[200], ), home: const DesktopHome(), ); }}class DesktopHome extends StatelessWidget { const DesktopHome({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Column( children: [ // 将标题栏放入可拖动区域 WindowDragToMoveArea( child: const CustomTitleBar(), ), // 内容区 const Expanded(child: DesktopContent()), ], ), ); }}class DesktopContent extends StatelessWidget { const DesktopContent({super.key}); @override Widget build(BuildContext context) { return const Center( child: Text( '欢迎使用 Flutter OS 模板\n这是一个基于 window_manager 构建的桌面应用', textAlign: TextAlign.center, style: TextStyle(fontSize: 18, color: Colors.black54), ), ); }}### 高级功能：窗口状态监听与系统托盘一个 OS 模板不能缺少系统托盘支持。我们可以通过 window_manager 的 setPreventClose 和 setSkipTaskbar 实现最小化到托盘。代码示例 4： 托盘管理（部分关键代码） dart// 在 WindowService 中添加以下方法import 'package:tray_manager/tray_manager.dart' as tray;Future<void> setupTray() async { // 监听窗口关闭事件，改为隐藏到托盘 windowManager.setPreventClose(true); // 创建托盘图标（需要准备一个 assets/tray_icon.png） await tray.TrayManager.instance.setIcon('assets/tray_icon.png'); // 设置托盘菜单 await tray.TrayManager.instance.setContextMenu(tray.Menu( items: [ tray.MenuItem(key: 'show', label: '显示主窗口'), tray.MenuItem(key: 'exit', label: '退出'), ], )); // 监听点击事件 tray.TrayManager.instance.addListener(TrayListener( onTrayIconMouseDown: () => windowManager.show(), onTrayMenuItemClick: (menuItem) { if (menuItem.key == 'exit') { windowManager.destroy(); } }, ));}### 总结通过本文的实战演练，我们成功使用 Flutter 和 window_manager 构建了一个具备 OS 级外观的 macOS 桌面应用模板。**核心收获：**1. 窗口控制自动化 ：通过 WindowService 封装了所有窗口操作，使得在 UI 层调用极其简洁。2. 自定义标题栏 ：用 Flutter Widget 完全替代了原生标题栏，实现了交通灯按钮和拖拽移动，这是桌面应用美观度的关键。3. 事件驱动架构 ：利用 WindowListener 监听窗口状态变化，便于同步 UI（如最大化按钮状态）。4. 可扩展性 ：模板中预留了托盘、多窗口等扩展点，你可以在此基础上添加业务功能。后续建议 ：- 可以进一步集成 menu_bar 包来创建自定义菜单栏。- 使用 window_manager 的 setFullScreen 方法实现沉浸式全屏模式。- 对于复杂的业务界面，可引入 Provider 或 Riverpod 管理状态。这个模板不仅是代码的堆砌，更是一个桌面应用的架构范本。它解决了 Flutter 桌面开发中最棘手的窗口管理问题，让你能专注于业务逻辑和 UI 设计，快速打造出具有原生体验的 macOS 应用。希望你能基于此模板，构建出令人惊艳的桌面 OS 级产品。