当前位置：首页 > news >正文

flutter 桌面应用之窗口自定义

news 来源：原创 2025/5/21 22:31:58

在开发桌面软件的时候我们经常需要配置软件的窗口的大小以及位置
我们有两个框架选择: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,
  ),
)