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. 概述](#1. 概述)
- [2. 安装和设置](#2. 安装和设置)
-
- [2.1 添加 bitsdojo_window 依赖](#2.1 添加 bitsdojo_window 依赖)
- [2.2 初始化 bitsdojo_window](#2.2 初始化 bitsdojo_window)
- [2.3 配置原生代码](#2.3 配置原生代码)
- [3. 窗口管理](#3. 窗口管理)
-
- [3.1 控制窗口的大小和位置](#3.1 控制窗口的大小和位置)
- [3.2 窗口的最小化、最大化、全屏和关闭操作](#3.2 窗口的最小化、最大化、全屏和关闭操作)
- [3.3 判断窗口是否已经最大化](#3.3 判断窗口是否已经最大化)
- [4. 自定义窗口外观](#4. 自定义窗口外观)
-
- [4.1 自定义窗口的标题和图标](#4.1 自定义窗口的标题和图标)
- [4.2 自定义窗口的背景颜色](#4.2 自定义窗口的背景颜色)
- [4.3 自定义窗口按钮的颜色](#4.3 自定义窗口按钮的颜色)
- [5. 高级功能](#5. 高级功能)
-
- [5.1 窗口的拖拽操作](#5.1 窗口的拖拽操作)
- [5.2 窗口的缩放操作](#5.2 窗口的缩放操作)
[1. 概述](#1. 概述)
bitsdojo_window
库为 Flutter 桌面应用开发提供了强大的支持。bitsdojo_window
提供了一种简化的方式来管理和自定义桌面窗口。这个库的主要目标是使开发者能够更轻松地构建具有桌面风格的应用程序。
bitsdojo_window
支持在 Windows 、macOS 和 Linux 上构建原生桌面应用程序。它提供了一系列的 API,使得开发者可以轻松地控制窗口的大小、位置、最小化、最大化、全屏、关闭等操作。此外,它还允许开发者自定义窗口的外观,包括窗口的标题、图标、背景颜色等。
使用 bitsdojo_window
,开发者可以专注于应用程序的核心功能,而不需要花费大量的时间和精力在窗口管理上。这使得 Flutter 桌面应用开发变得更加简单和高效。
[2. 安装和设置](#2. 安装和设置)
[2.1 添加 bitsdojo_window 依赖](#2.1 添加 bitsdojo_window 依赖)
要在 Flutter 项目中使用 bitsdojo_window
,首先需要在项目的 pubspec.yaml
文件中添加 bitsdojo_window
的依赖。以下是添加依赖的步骤:
yaml
dependencies:
flutter:
sdk: flutter
bitsdojo_window: ^0.1.5
然后在终端中运行下面的命令,以获取 bitsdojo_window 的依赖包:
bash
flutter pub get
或者直接运行add命令以安装其最新的版本:
bash
flutter pub add bitsdojo_window
[2.2 初始化 bitsdojo_window](#2.2 初始化 bitsdojo_window)
在添加了 bitsdojo_window
的依赖之后,需要在项目中初始化 bitsdojo_window
。
- 在项目的
main.dart
文件中导入bitsdojo_window
库,如下所示:
dart
import 'package:bitsdojo_window/bitsdojo_window.dart';
- 在
main()
函数中调用doWhenWindowReady()
函数,以确保窗口准备就绪后再进行初始化,如下所示:
dart
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();
});
}
在上述代码中,doWhenWindowReady()
函数会等待窗口准备就绪后再进行初始化。appWindow
是 bitsdojo_window
库提供的一个全局对象,用于访问和控制应用程序的窗口。通过 appWindow
对象,可以设置窗口的最小大小、当前大小、位置、标题等属性,并可以显示窗口。
至此,bitsdojo_window
的安装和设置就完成了。接下来,你就可以使用 bitsdojo_window
来管理和自定义你的 Flutter 桌面应用程序的窗口了。
[2.3 配置原生代码](#2.3 配置原生代码)
在 Windows 上,需要在 windows\runner\main.cpp
文件中添加以下两行代码:
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
文件中进行以下修改:
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
}
[3. 窗口管理](#3. 窗口管理)
[3.1 控制窗口的大小和位置](#3.1 控制窗口的大小和位置)
使用 bitsdojo_window
,你可以轻松地控制窗口的大小和位置。以下是如何进行操作的示例:
dart
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();
});
}
在上述代码中,minSize
属性用于设置窗口的最小大小,size
属性用于设置窗口的当前大小,alignment
属性用于设置窗口的位置。例如,Alignment.center 会将窗口置于屏幕中心。
[3.2 窗口的最小化、最大化、全屏和关闭操作](#3.2 窗口的最小化、最大化、全屏和关闭操作)
bitsdojo_window
提供了一系列的函数,用于进行窗口的最小化、最大化、全屏和关闭操作。以下是如何进行操作的示例:
dart
void main() {
runApp(MyApp());
doWhenWindowReady(() {
final win = appWindow;
// 最小化窗口
win.minimize();
// 最大化窗口
win.maximize();
// 全屏显示窗口
win.showFullScreen();
// 关闭窗口
win.close();
});
}
在上述代码中,minimize()
函数用于最小化窗口,maximize()
函数用于最大化窗口,showFullScreen()
函数用于全屏显示窗口,close()
函数用于关闭窗口。
请注意,这些操作通常会在响应用户的某些操作(例如点击按钮)时进行,而不是在 main()
函数中直接进行。
[3.3 判断窗口是否已经最大化](#3.3 判断窗口是否已经最大化)
可以使用 appWindow.isMaximized 属性来判断窗口是否已经最大化。如果窗口已经最大化,可以使用 RestoreWindowButton 组件来显示一个恢复窗口的按钮;如果窗口没有最大化,可以使用 MaximizeWindowButton 组件来显示一个最大化窗口的按钮。
dart
appWindow.isMaximized
? RestoreWindowButton(colors: buttonColors, onPressed: maximizeOrRestore)
: MaximizeWindowButton(colors: buttonColors, onPressed: maximizeOrRestore)
[4. 自定义窗口外观](#4. 自定义窗口外观)
[4.1 自定义窗口的标题和图标](#4.1 自定义窗口的标题和图标)
使用 bitsdojo_window
,你可以轻松地自定义窗口的标题和图标。以下是如何进行操作的示例:
dart
void main() {
runApp(MyApp());
doWhenWindowReady(() {
final win = appWindow;
// 设置窗口标题
win.title = "My Custom Title";
// 设置窗口图标
win.icon = "assets/icon.png";
});
}
在上述代码中,title
属性用于设置窗口的标题,icon
属性用于设置窗口的图标。请注意,图标文件应该是项目的资源文件,需要在 pubspec.yaml
文件中进行声明。
[4.2 自定义窗口的背景颜色](#4.2 自定义窗口的背景颜色)
bitsdojo_window
也允许你自定义窗口的背景颜色。你可以通过 Flutter 的 MaterialApp 或 CupertinoApp 的 theme 属性来设置窗口的背景颜色。以下是如何进行操作的示例:
dart
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// 设置窗口的背景颜色
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
在上述代码中,primarySwatch
属性用于设置窗口的背景颜色。你可以选择任何你喜欢的颜色。
通过这些设置,你可以根据你的需求和喜好来自定义你的 Flutter 桌面应用程序的窗口外观。
[4.3 自定义窗口按钮的颜色](#4.3 自定义窗口按钮的颜色)
可以使用 WindowButtonColors 类来设置窗口按钮的颜色。例如,可以设置最小化、最大化和关闭按钮的颜色。
dart
final buttonColors = WindowButtonColors(
normal: Colors.blue.withOpacity(.2),
iconNormal: Colors.blue,
mouseOver: Colors.red,
mouseDown: Colors.green,
iconMouseOver: Colors.white,
iconMouseDown: Colors.orange,
);
然后,可以使用这个 buttonColors 对象来设置按钮的颜色:
dart
MinimizeWindowButton(colors: buttonColors)
MaximizeWindowButton(colors: buttonColors)
[5. 高级功能](#5. 高级功能)
[5.1 窗口的拖拽操作](#5.1 窗口的拖拽操作)
bitsdojo_window
提供了一种简单的方式来实现窗口的拖拽操作。你可以使用 MoveWindow 组件来包裹你希望用于拖拽窗口的部分。例如:
dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: MoveWindow(
child: Text('My Custom Title'),
),
),
body: MyHomePage(),
),
);
}
}
在上述代码中,MoveWindow 组件包裹了标题文本,这意味着用户可以通过拖拽标题文本来移动窗口。
[5.2 窗口的缩放操作](#5.2 窗口的缩放操作)
bitsdojo_window
也提供了一种简单的方式来实现窗口的缩放操作。你可以使用 ResizeWindow 组件来包裹你希望用于缩放窗口的部分,并指定缩放的方向。以下是如何进行操作的示例:
dart
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,
),
),
],
),
),
);
}
}
在上述代码中,ResizeWindow 组件被放置在窗口的右下角,用户可以通过拖拽这个部分来缩放窗口。edge
属性用于指定缩放的方向,WindowEdge.bottomRight 表示从右下角进行缩放。
通过这些高级功能,你可以提供更丰富的交互体验,使你的 Flutter 桌面应用程序更加易用和友好。