在開發桌面軟件的時候我們經常需要配置軟件的窗口的大小以及位置
我們有兩個框架選擇: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,),
)
)
)
