Flutter笔记：桌面应用 窗口定制库 bitsdojo_window

Flutter笔记 桌面应用窗口管理库 bitsdojo_window

---

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263
邮箱 ：291148484@163.com
本文地址：https://blog.csdn.net/qq_28550263/article/details/134464678

---

高级：多窗口管理，请跳转到：《Flutter桌面端应用多窗口管理》，地址：https://jclee95.blog.csdn.net/article/details/134468587))

【简介】本文介绍一个当前 Flutter 桌面应用开发中自定义桌面窗口的模块 bitsdojo_window。 它允许你在 Windows、macOS 和 Linux 上构建原生桌面应用程序。bitsdojo_window 模块提供了一种简化窗口管理、自定义窗口外观和交互的方法，使开发者能够更轻松地构建具有桌面风格的应用程序。

---

1. 概述

bitsdojo_window 库为 Flutter 桌面应用开发提供了强大的支持。bitsdojo_window 提供了一种简化的方式来管理和自定义桌面窗口。这个库的主要目标是使开发者能够更轻松地构建具有桌面风格的应用程序。

bitsdojo_window 支持在 Windows、macOS 和 Linux 上构建原生桌面应用程序。它提供了一系列的 API，使得开发者可以轻松地控制窗口的大小、位置、最小化、最大化、全屏、关闭等操作。此外，它还允许开发者自定义窗口的外观，包括窗口的标题、图标、背景颜色等。

使用 bitsdojo_window，开发者可以专注于应用程序的核心功能，而不需要花费大量的时间和精力在窗口管理上。这使得 Flutter 桌面应用开发变得更加简单和高效。

2. 安装和设置

2.1 添加 bitsdojo_window 依赖

要在 Flutter 项目中使用 bitsdojo_window，首先需要在项目的 pubspec.yaml 文件中添加 bitsdojo_window 的依赖。以下是添加依赖的步骤：

dependencies:
  flutter:
    sdk: flutter

  bitsdojo_window: ^0.1.5
1
2
3
4
5

然后在终端中运行下面的命令，以获取 bitsdojo_window 的依赖包：

flutter pub get
1

或者直接运行add命令以安装其最新的版本：

flutter pub add bitsdojo_window
1

2.2 初始化 bitsdojo_window

在添加了 bitsdojo_window 的依赖之后，需要在项目中初始化 bitsdojo_window。

1. 在项目的 main.dart 文件中导入 bitsdojo_window 库，如下所示：

import 'package:bitsdojo_window/bitsdojo_window.dart';
1

2. 在 main() 函数中调用 doWhenWindowReady() 函数，以确保窗口准备就绪后再进行初始化，如下所示：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;
    final initialSize = Size(600, 450);
    win.minSize = initialSize;
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.title = "My Flutter App";
    win.show();
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13

在上述代码中，doWhenWindowReady() 函数会等待窗口准备就绪后再进行初始化。appWindow 是 bitsdojo_window 库提供的一个全局对象，用于访问和控制应用程序的窗口。通过 appWindow 对象，可以设置窗口的最小大小、当前大小、位置、标题等属性，并可以显示窗口。

至此，bitsdojo_window 的安装和设置就完成了。接下来，你就可以使用 bitsdojo_window 来管理和自定义你的 Flutter 桌面应用程序的窗口了。

2.3 配置原生代码

在 Windows 上，需要在 windows\runner\main.cpp 文件中添加以下两行代码：

#include
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);
1
2

在 macOS 上，需要在 macos\runner\MainFlutterWindow.swift 文件中进行以下修改：

import FlutterMacOS
import bitsdojo_window_macos // Add this line

class MainFlutterWindow: BitsdojoWindow {
  override func bitsdojo_window_configure() -> UInt {
  return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
}
  // rest of your code
}
1
2
3
4
5
6
7
8
9

3. 窗口管理

3.1 控制窗口的大小和位置

使用 bitsdojo_window，你可以轻松地控制窗口的大小和位置。以下是如何进行操作的示例：

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;
    final initialSize = Size(800, 600);
    win.minSize = Size(600, 450);
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.show();
  });
}
1
2
3
4
5
6
7
8
9
10
11

在上述代码中，minSize 属性用于设置窗口的最小大小，size 属性用于设置窗口的当前大小，alignment 属性用于设置窗口的位置。例如，Alignment.center 会将窗口置于屏幕中心。

3.2 窗口的最小化、最大化、全屏和关闭操作

bitsdojo_window 提供了一系列的函数，用于进行窗口的最小化、最大化、全屏和关闭操作。以下是如何进行操作的示例：

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;

    // 最小化窗口
    win.minimize();

    // 最大化窗口
    win.maximize();

    // 全屏显示窗口
    win.showFullScreen();

    // 关闭窗口
    win.close();
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在上述代码中，minimize() 函数用于最小化窗口，maximize() 函数用于最大化窗口，showFullScreen() 函数用于全屏显示窗口，close() 函数用于关闭窗口。

请注意，这些操作通常会在响应用户的某些操作（例如点击按钮）时进行，而不是在 main() 函数中直接进行。

3.3 判断窗口是否已经最大化

可以使用 appWindow.isMaximized 属性来判断窗口是否已经最大化。如果窗口已经最大化，可以使用 RestoreWindowButton 组件来显示一个恢复窗口的按钮；如果窗口没有最大化，可以使用 MaximizeWindowButton 组件来显示一个最大化窗口的按钮。

appWindow.isMaximized
    ? RestoreWindowButton(colors: buttonColors, onPressed: maximizeOrRestore)
    : MaximizeWindowButton(colors: buttonColors, onPressed: maximizeOrRestore)
1
2
3

4. 自定义窗口外观

4.1 自定义窗口的标题和图标

使用 bitsdojo_window，你可以轻松地自定义窗口的标题和图标。以下是如何进行操作的示例：

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;

    // 设置窗口标题
    win.title = "My Custom Title";

    // 设置窗口图标
    win.icon = "assets/icon.png";
  });
}
1
2
3
4
5
6
7
8
9
10
11
12

在上述代码中，title 属性用于设置窗口的标题，icon 属性用于设置窗口的图标。请注意，图标文件应该是项目的资源文件，需要在 pubspec.yaml 文件中进行声明。

4.2 自定义窗口的背景颜色

bitsdojo_window 也允许你自定义窗口的背景颜色。你可以通过 Flutter 的 MaterialApp 或 CupertinoApp 的 theme 属性来设置窗口的背景颜色。以下是如何进行操作的示例：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // 设置窗口的背景颜色
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在上述代码中，primarySwatch 属性用于设置窗口的背景颜色。你可以选择任何你喜欢的颜色。

通过这些设置，你可以根据你的需求和喜好来自定义你的 Flutter 桌面应用程序的窗口外观。

4.3 自定义窗口按钮的颜色

可以使用 WindowButtonColors 类来设置窗口按钮的颜色。例如，可以设置最小化、最大化和关闭按钮的颜色。

final buttonColors = WindowButtonColors(
    normal: Colors.blue.withOpacity(.2),
    iconNormal: Colors.blue,
    mouseOver: Colors.red,
    mouseDown: Colors.green,
    iconMouseOver: Colors.white,
    iconMouseDown: Colors.orange,
);
1
2
3
4
5
6
7
8

然后，可以使用这个 buttonColors 对象来设置按钮的颜色：

MinimizeWindowButton(colors: buttonColors)
MaximizeWindowButton(colors: buttonColors)
1
2

5. 高级功能

5.1 窗口的拖拽操作

bitsdojo_window 提供了一种简单的方式来实现窗口的拖拽操作。你可以使用 MoveWindow 组件来包裹你希望用于拖拽窗口的部分。例如：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: MoveWindow(
            child: Text('My Custom Title'),
          ),
        ),
        body: MyHomePage(),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在上述代码中，MoveWindow 组件包裹了标题文本，这意味着用户可以通过拖拽标题文本来移动窗口。

5.2 窗口的缩放操作

bitsdojo_window 也提供了一种简单的方式来实现窗口的缩放操作。你可以使用 ResizeWindow 组件来包裹你希望用于缩放窗口的部分，并指定缩放的方向。以下是如何进行操作的示例：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            MyHomePage(),
            Positioned(
              right: 0,
              bottom: 0,
              child: ResizeWindow(
                width: 10,
                height: 10,
                edge: WindowEdge.bottomRight,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在上述代码中，ResizeWindow 组件被放置在窗口的右下角，用户可以通过拖拽这个部分来缩放窗口。edge 属性用于指定缩放的方向，WindowEdge.bottomRight 表示从右下角进行缩放。

通过这些高级功能，你可以提供更丰富的交互体验，使你的 Flutter 桌面应用程序更加易用和友好。