Flutter桌面软件开发中使用bitsdojo_window 自定义拖拽导航以及关闭按钮
Flutter桌面软件开发中如何使用bitsdojo_window 自定义拖拽导航以及关闭按钮呢，下面一起看看
一、Flutter桌面软件开发中使用bitsdojo_window 自定义导航需要配置原生代码（可以去掉默认导航）
For Windows apps
Inside your application folder, go to windows\runner\main.cpp and add these two lines at the beginning of the file:
#include <bitsdojo_window_windows/bitsdojo_window_plugin.h>
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);
For macOS apps
Inside your application folder, go to macos\runner\MainFlutterWindow.swift and add this line after the one saying import FlutterMacOS :
import FlutterMacOS
import bitsdojo_window_macos // Add this line
Then change this line from:
class MainFlutterWindow: NSWindow {
to this:
class MainFlutterWindow: BitsdojoWindow {
After changing NSWindow to BitsdojoWindow add these lines below the line you changed:
override func bitsdojo_window_configure() -> UInt {
return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
}
Your code should now look like this:
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。
二、Flutter桌面软件开发中使用bitsdojo_window 最大化 最小化 关闭 导航拖动组件
1、最小化按钮对应组件
MinimizeWindowButton()
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)
2、最大化按钮对应组件
通过appWindow.isMaximized判断是否是最大化,完整代码如下
appWindow.isMaximized
? RestoreWindowButton(
colors: buttonColors,
onPressed: maximizeOrRestore,
)
: MaximizeWindowButton(
colors: buttonColors,
onPressed: maximizeOrRestore,
),
)
void maximizeOrRestore() {
setState(() {
appWindow.maximizeOrRestore();
});
}
3、关闭按钮对应组件
CloseWindowButton()
4、设置窗口的边框 WindowBorder
required Widget child：桌面程序的主要内容required Color color：边框的颜色double? width：边框的宽度，默认为1
设置窗口的边框。可以传入4个参数：
home: Scaffold(
body: WindowBorder(
color: Colors.blue,
child: const Center(
child: Text('Hello World'),
),
),
)
5、顶部拖动按钮组件
WindowTitleBarBox
窗口标题栏。可以传入2个参数：
Key? key：🤫Widget? child：标题栏显示的内容
该组件实际上就是一个设置死高度的SizedBox
MoveWindow
可滑动区域。可以传入2个参数：
Key? key：🤫Widget? child：移动组件里显示的内容
WindowTitleBarBox(child: MoveWindow())
三、Flutter桌面软件开发中使用bitsdojo_window 自定义导航和右侧按钮完整代码(官方示例)
import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';
void main() async {
runApp(const MyApp());
doWhenWindowReady(() {
final win = appWindow;
const initialSize = Size(600, 450);
win.minSize = initialSize;
win.size = initialSize;
win.alignment = Alignment.center;
win.title = "Custom window with Flutter";
win.show();
});
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: WindowBorder(
color: const Color(0xFF805306),
child: Row(
children: const [LeftSide(), RightSide()],
),
));
}
}
//左侧区域
class LeftSide extends StatelessWidget {
const LeftSide({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
width: 100,
child: Container(
color: Colors.amber[100],
child: Column(
children: [
//左侧顶部 拖动导航组件
WindowTitleBarBox(child: MoveWindow()),
//左侧底部组件
const Expanded(
child: SizedBox(
child: const Text("左侧区域"),
))
],
)));
}
}
//右侧区域
class RightSide extends StatelessWidget {
const RightSide({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Expanded(
child: SizedBox(
child: Column(children: [
//右侧顶部
Container(
color: Colors.grey[200],
child: WindowTitleBarBox(
child: Row(
children: [
Expanded(child: MoveWindow()),
const WindowButtons()
],
),
),
),
//右侧底部
Expanded(
child: SizedBox(
child: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(title: Text("标题-$index"));
}),
))
]),
),
);
}
}
//自定义右侧 最小化 最大化和关闭按钮
class WindowButtons extends StatefulWidget {
const WindowButtons({Key? key}) : super(key: key);
@override
_WindowButtonsState createState() => _WindowButtonsState();
}
class _WindowButtonsState extends State<WindowButtons> {
final buttonColors = WindowButtonColors(
iconNormal: Colors.grey[600],
mouseOver: Colors.grey[400],
mouseDown: Colors.grey[400],
iconMouseOver: Colors.grey[600],
iconMouseDown: Colors.grey[600]);
void maximizeOrRestore() {
setState(() {
appWindow.maximizeOrRestore();
});
}
@override
Widget build(BuildContext context) {
return Row(
children: [
MouseRegion(
cursor: SystemMouseCursors.click,
child: MinimizeWindowButton(colors: buttonColors),
),
MouseRegion(
cursor: SystemMouseCursors.click,
child: appWindow.isMaximized
? RestoreWindowButton(
colors: buttonColors,
onPressed: maximizeOrRestore,
)
: MaximizeWindowButton(
colors: buttonColors,
onPressed: maximizeOrRestore,
),
),
MouseRegion(
cursor: SystemMouseCursors.click,
child: CloseWindowButton(colors: buttonColors),
)
],
);
}
}
