flutter 桌面应用之窗口自定义

在开发桌面软件的时候我们经常需要配置软件的窗口的大小以及位置

我们有两个框架选择:window_manager和bitsdojo_window

对比bitsdojo_window

特性	bitsdojo_window	window_manager
自定义标题栏	✅ 支持	❌ 不支持
控制窗口行为（大小/位置）	✅（基本）	✅（更全面）
拖动窗口自定义区域	✅	❌
是否保留原生边框	❌（默认隐藏）	✅（保留系统默认）
最小化/最大化/关闭功能	✅	✅
监听窗口事件	❌	✅
跨平台支持	Windows, macOS, Linux	Windows, macOS, Linux

---

组合使用建议

实际上，很多 Flutter 桌面项目会 同时使用这两个库：

• 用 bitsdojo_window 自定义 UI 和拖动区域；

• 用 window_manager 控制窗口行为（比如窗口置顶、限制大小、获取当前窗口状态）。

bitsdojo_window支持的特性

• 自定义窗口框架 - 移除 Windows/macOS/Linux 的标准标题栏和按钮

• 启动时隐藏窗口

• 显示/隐藏窗口

• 使用 Flutter 小部件移动窗口

• 最小化/最大化/恢复/关闭窗口

• 设置窗口大小、最小尺寸和最大尺寸

• 设置窗口位置

• 设置窗口在屏幕上的对齐方式（居中/左上/右上/左下/右下）

• 设置窗口标题

hello word

在flutter启动时设置窗口样式

void main() async {
  runApp(const MyApp());

  doWhenWindowReady(() async {
    final win = appWindow;
    const initialSize = Size(300, 450);
    win.minSize = initialSize;
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.title = "Custom window with Flutter";
    win.show();
  });
}

在MainFlutterWindow 中增加

在您的应用程序文件夹中，转到macos\runner\MainFlutterWindow.swift并在以下行后添加此行import FlutterMacOS：

import` FlutterMacOS
`import` bitsdojo_window_macos `// Add this line`
`

然后将此行从：

class` `MainFlutterWindow`: `NSWindow` {
`

对此：

class` `MainFlutterWindow`: `BitsdojoWindow` {
`

更改后NSWindow，在BitsdojoWindow更改的行下方添加以下行：

override` `func` `bitsdojo_window_configure`() -> `UInt` {
  `return` `BDW_CUSTOM_FRAME` | `BDW_HIDE_ON_STARTUP`
}
`

您的代码现在应如下所示：

class` `MainFlutterWindow`: `BitsdojoWindow` {
    
  `override` `func` `bitsdojo_window_configure`() -> `UInt` {
    `return` `BDW_CUSTOM_FRAME` | `BDW_HIDE_ON_STARTUP`
  }
    
  `override` `func` `awakeFromNib`() {
    ... `//rest of your code`
`

如果您不想使用自定义框架而更喜欢标准窗口标题栏和按钮，则可以BDW_CUSTOM_FRAME从上面的代码中删除标志。

如果您不想在启动时隐藏窗口，您可以BDW_HIDE_ON_STARTUP从上面的代码中删除标志。

运行效果

自定义topbar

mac平台不能自定义 关闭/缩小/放大,windows可以

dojo_window windowbutton 用于这三者的基础封装,有三个实现

组件名	说明
MinimizeWindowButton()	最小化按钮
MaximizeWindowButton()	最大化按钮
CloseWindowButton()	关闭按钮
WindowButtons（自定义）	通常你会组合多个按钮形成自己的窗口按钮区域

WindowButton 参数详解

这是核心组件，其他三个按钮都基于它封装：

WindowButton({
  required VoidCallback onPressed,
  required WindowButtonColors colors,
  required Widget icon,
  bool animate = true,
  double? iconSize,
})

参数说明：

参数名	类型	说明
onPressed	VoidCallback	点击按钮的事件处理函数（比如最小化窗口）
colors	WindowButtonColors	定义按钮在不同状态下的颜色（常用）
icon	Widget	按钮显示的图标，一般是 Icon(Icons.XXX)
animate	bool	是否启用 hover 动画（默认开启）
iconSize	double?	图标大小（可选，默认 10~16）

---

WindowButtonColors

用于自定义按钮颜色

WindowButtonColors({
  required Color iconNormal,
  required Color mouseOver,
  required Color mouseDown,
  required Color iconMouseOver,
  required Color iconMouseDown,
})

示例说明：

属性名	说明
iconNormal	默认状态下图标颜色
mouseOver	鼠标悬停时的按钮背景颜色
mouseDown	鼠标点击时的按钮背景颜色
iconMouseOver	悬停时的图标颜色
iconMouseDown	点击时的图标颜色

---

✅ 示例用法

CloseWindowButton(
  colors: WindowButtonColors(
    iconNormal: Colors.white,
    mouseOver: Colors.red,
    mouseDown: Colors.redAccent,
    iconMouseOver: Colors.white,
    iconMouseDown: Colors.white,
  ),
)

或者使用 WindowButton 自定义：

WindowButton(
  onPressed: () => print("Clicked!"),
  icon: Icon(Icons.settings, size: 14, color: Colors.white),
  colors: WindowButtonColors(
    iconNormal: Colors.white,
    mouseOver: Colors.blueGrey,
    mouseDown: Colors.blue,
    iconMouseOver: Colors.white,
    iconMouseDown: Colors.white,
  ),
)