Flutter桌面端開發——bitsdojo_window插件的使用


bitsdojo_window 是一個用來定制桌面端窗口的插件。

目前擁有以下功能:

  1. 自定義窗口框架——移除了 Windows/macOS/Linux 規范的標題欄和按鈕
  2. 啟動時隱藏窗口
  3. 顯示/隱藏窗口
  4. 使用Flutter組件移動窗口
  5. 最小化/最大化/恢復/關閉窗口
  6. 設置窗口大小,最小尺寸和最大尺寸
  7. 設置窗口位置
  8. 在屏幕上設置窗口對齊方式(中心/左上角/右上角/左下角/右下角)
  9. 設置窗口標題

安裝

點擊 bitsdojo_window 獲取最新版本

pubspec.yaml

dependencies:
  bitsdojo_window: ^last_version

准備

Window

打開 windows\runner\main.cpp 文件,添加以下代碼到前面:

#include <bitsdojo_window_windows/bitsdojo_window_plugin.h>
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);

macOS

打卡 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

Linux

打開linux\my_application.cc文件,添加以下代碼到第一行:

#include <bitsdojo_window_linux/bitsdojo_window_plugin.h>

然后找到這兩行:

gtk_window_set_default_size(window, 1280, 720);
gtk_widget_show(GTK_WIDGET(window));

改成如下內容:

auto bdw = bitsdojo_window_from(window);            // <--- add this line
bdw->setCustomFrame(true);                          // <-- add this line
//gtk_window_set_default_size(window, 1280, 720);   // <-- comment this line
gtk_widget_show(GTK_WIDGET(window));

正如您所看到的,我們注釋了gtk_window_set_default_size這一行,並在gtk_widget_show(GTK_WIDGET(window))之前添加了兩行新代碼。

使用

首先在 lib\main.dart中添加以下代碼:

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

  doWhenWindowReady(() {
    final win = appWindow;
    const initialSize = Size(800, 600);
    win.minSize = initialSize;
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.title = 'Hello World';
    win.show();
  });
}

image

WindowBorder

設置窗口的邊框。可以傳入4個參數:

  • Key? key:🤫
  • required Widget child:桌面程序的主要內容
  • required Color color:邊框的顏色
  • double? width:邊框的寬度,默認為1
home: Scaffold(
  body: WindowBorder(
    color: Colors.blue,
    child: const Center(
      child: Text('Hello World'),
    ),
  ),
)

image

WindowTitleBarBox

窗口標題欄。可以傳入2個參數:

  • Key? key:🤫
  • Widget? child:標題欄顯示的內容

該組件實際上就是一個設置死高度的SizedBox

MoveWindow

可滑動區域。可以傳入2個參數:

  • Key? key:🤫
  • Widget? child:移動組件里顯示的內容
WindowTitleBarBox(child: MoveWindow(child: Container(color: Colors.white))),

image

MinimizeWindowButton

最小化按鈕

MaximizeWindowButton

最大化按鈕

CloseWindowButton

關閉按鈕

以上3個組件都可以傳入4個參數:

  • Key? key:🤫
  • WindowButtonColors? colors:設置按鈕不同狀態的顏色
  • void Function()? onPressed:設置按鈕的點擊方法
  • bool? animate:是否啟用動畫,默認為false
return Row(
  children: [
    MinimizeWindowButton(),
    MaximizeWindowButton(),
    CloseWindowButton(),
  ],
);

image

WindowButtonColors

設置按鈕的顏色。可以傳入6個參數:

  • Color? normal:普通狀態圖標背景的顏色
  • Color? mouseOver:鼠標到圖標時的背景色
  • Color? mouseDown:鼠標按下按鈕時的背景色
  • Color? iconNormal:普通狀態下按鈕的顏色
  • Color? iconMouseOver:鼠標移動到按鈕圖標時的圖標顏色
  • Color? iconMouseDown:鼠標按下時按鈕圖標的顏色
final buttonColors = WindowButtonColors(
  normal: Colors.blue.withOpacity(.2),
  iconNormal: Colors.blue,
  mouseOver: Colors.red,
  mouseDown: Colors.green,
  iconMouseOver: Colors.white,
  iconMouseDown: Colors.orange,
);
MaximizeWindowButton(colors: buttonColors),

image

appWindow

屬性

titleBarHeight

用來回去標題欄的高度(只讀)

title

設置應用標題

alignment

設置應用在桌面的對齊位置

size

設置應用的寬高

minSize

設置應用的最下寬高

isMaximized

檢測應用是否是最大狀態

position

設置應用的距離左上角的位置

rect

可以使用該屬性代替sizeRect.largest可以設置最大化窗口啟動

borderSize

獲取應用的邊框寬度

handle

返回一個int類型的值

isVisible

檢測當前應用是否可見狀態

maxSize

設置應用的最大寬高

scaleFactor

獲取桌面的比例?反正不是應用顯示的比例

titleBarButtonSize

獲取標題欄按鈕的尺寸(只讀)

方法

show()

用來顯示窗口

maximize()

最大化窗口

close()

關閉窗口

minimize()

最小化窗口

restore()

恢復窗口

maximizeOrRestore()

最大化或恢復窗口

hide()

隱藏窗口

startDragging()

拖動窗口


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM