Flutter桌面端开发——bitsdojo_window插件的使用

bitsdojo_window 是一个用来定制桌面端窗口的插件。

目前拥有以下功能：

自定义窗口框架——移除了 Windows/macOS/Linux 规范的标题栏和按钮
启动时隐藏窗口
显示/隐藏窗口
使用Flutter组件移动窗口
最小化/最大化/恢复/关闭窗口
设置窗口大小，最小尺寸和最大尺寸
设置窗口位置
在屏幕上设置窗口对齐方式（中心/左上角/右上角/左下角/右下角）
设置窗口标题

安装

点击 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();
  });
}

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'),
    ),
  ),
)

WindowTitleBarBox

窗口标题栏。可以传入2个参数：

Key? key：🤫
Widget? child：标题栏显示的内容

该组件实际上就是一个设置死高度的SizedBox

MoveWindow

可滑动区域。可以传入2个参数：

Key? key：🤫
Widget? child：移动组件里显示的内容

WindowTitleBarBox(child: MoveWindow(child: Container(color: Colors.white))),

MinimizeWindowButton

最小化按钮

MaximizeWindowButton

最大化按钮

CloseWindowButton

关闭按钮

以上3个组件都可以传入4个参数：

Key? key：🤫
WindowButtonColors? colors：设置按钮不同状态的颜色
void Function()? onPressed：设置按钮的点击方法
bool? animate：是否启用动画，默认为false

return Row(
  children: [
    MinimizeWindowButton(),
    MaximizeWindowButton(),
    CloseWindowButton(),
  ],
);

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),

appWindow

属性

titleBarHeight

用来回去标题栏的高度（只读）

title

设置应用标题

alignment

设置应用在桌面的对齐位置

size

设置应用的宽高

minSize

设置应用的最下宽高

isMaximized

检测应用是否是最大状态

position

设置应用的距离左上角的位置

rect

可以使用该属性代替size，Rect.largest可以设置最大化窗口启动

borderSize

获取应用的边框宽度

handle

返回一个int类型的值

isVisible

检测当前应用是否可见状态

maxSize

设置应用的最大宽高

scaleFactor

获取桌面的比例？反正不是应用显示的比例

titleBarButtonSize

获取标题栏按钮的尺寸（只读）

方法

show()

用来显示窗口

maximize()

最大化窗口

close()

关闭窗口

minimize()

最小化窗口

restore()

恢复窗口

maximizeOrRestore()

最大化或恢复窗口

hide()

隐藏窗口

startDragging()

拖动窗口

posted @ 2022-03-26 15:46 菠萝橙子丶阅读(4777) 评论(2) 编辑收藏举报

刷新页面返回顶部

DerFeigling