flutter 桌面应用之窗口自定义

在开发桌面软件的时候我们经常需要配置软件的窗口的大小以及位置
我们有两个框架选择:window_manager和bitsdojo_window

对比bitsdojo_window

组合使用建议

实际上，很多 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 用于这三者的基础封装,有三个实现

WindowButton 参数详解

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

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

参数说明：

WindowButtonColors

用于自定义按钮颜色

WindowButtonColors({
  required Color iconNormal,
  required Color mouseOver,
  required Color mouseDown,
  required Color iconMouseOver,
  required Color 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,
  ),
)