一、需求
桌面端中,登录、注册、找回密码页面不允许用户手动放大缩小,主页面允许
二、插件
window_manager
使用教程请参照这篇博客:Flutter桌面端开发——window_manager插件的使用
题外话:
之前使用的是bitsdojo_window插件,使用方法请参照博客 bitsdojo_window
这个插件中,如果想要用户不允许操作应用页面大小的话,需要设置 最大大小 等于 最小大小
(appWindow.maxSize = appWindow.minSize)。设置完成后,确实可以达到登录等页面的禁止用户拉伸页面的效果,但是,主页面也变成了不可拉伸(在创建第一个页面之后,这些设置好的属性是一直会被沿用,除非后续页面初始化的时候,覆盖原有属性),所以,如果想要主页面可以控制大小,应该重新设置maxSize,这时的maxSize应为电脑屏幕大小,但是flutter获取不到电脑的物理属性,所以无解,改用window_manager
三、使用
1、创建一个文件专门用于window_manager操作
class WindowUtil {
static void init({required double width, required double height}) async {
WindowOptions windowOptions = WindowOptions(
size: Size(width, height),
minimumSize: Size(width, height),
center: true,
backgroundColor: Colors.transparent,
skipTaskbar: false,
titleBarStyle: TitleBarStyle.hidden,
);
windowManager.waitUntilReadyToShow(windowOptions, () async {
await windowManager.show();
await windowManager.focus();
});
}
}
2、main中初始化
import 'package:flutter/material.dart';
import 'package:window_manager/window_manager.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
3、禁止拖动
创建方法 setResizable
///设置用户是否可以手动放大缩小
static void setResizable(bool reSize) {
windowManager.setResizable(reSize);
}
在不允许用户改变应用大小的页面的initState方法中
void initState() {
super.initState();
///设置不可以手动放大缩小
WindowUtil.setResizable(false);
}
在允许用户改变应用大小的页面的initState方法中
void initState() {
super.initState();
///设置不可以手动放大缩小
WindowUtil.setResizable(true);
}
这样,就可以设置不同页面不同的拉伸效果了
四、设置顶层三个按钮
///关闭窗口
static void close() async {
await windowManager.destroy();
}
///缩小窗口
static void hide() async {
await windowManager.minimize();
}
///放大窗口
static void maximize() async {
if (await windowManager.isMaximized()) {
await windowManager.unmaximize();
} else {
await windowManager.maximize();
}
}
///设置顶部按钮
class ControllerButton extends StatelessWidget {
final int funType; //响应事件
final Color normal; //普通状态图标背景的颜色
final Color mouseOver; //鼠标到图标时的背景色
final String icons; //图标
final Color iconColor; //图标颜色
const ControllerButton(
{super.key,
this.normal = Colors.transparent,
this.mouseOver = Colors.black12,
this.iconColor = Colors.black,
required this.icons,
required this.funType});
///判断顶部按钮使用的是哪种方法
static Map<int, void Function()?> defaultMethod = {
1: () {
WindowUtil.hide();
}, //隐藏窗口
2: () {
WindowUtil.maximize();
}, //放大窗口
3: () {
WindowUtil.close();
}, //关闭窗口
};
Widget build(BuildContext context) {
return Container(
width: 40,
margin: const EdgeInsets.only(right: 5),
child: ElevatedButton(
onPressed: defaultMethod[funType],
style: ButtonStyle(
///不做任何操作时的背景颜色
backgroundColor: MaterialStateProperty.all(normal),
///鼠标悬停的时候背景颜色
overlayColor: MaterialStateProperty.all(mouseOver),
/// 阴影值
elevation: MaterialStateProperty.all(0),
///阴影的颜色
shadowColor: MaterialStateProperty.all(Colors.transparent),
///去掉水波纹效果
splashFactory: NoSplash.splashFactory,
///内边距
padding: const MaterialStatePropertyAll(EdgeInsets.all(0))),
///这三个按钮我是用图片来展示的,所以用的image,也可以使用icon等
child: Image(
image: AssetImage(
icons,
),
color: iconColor,
),
));
}
}