> 文章列表 > Flutter PC桌面端 控制应用尺寸是否允许放大缩小

Flutter PC桌面端 控制应用尺寸是否允许放大缩小

Flutter PC桌面端 控制应用尺寸是否允许放大缩小

一、需求

桌面端中,登录、注册、找回密码页面不允许用户手动放大缩小,主页面允许

二、插件

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);}

这样,就可以设置不同页面不同的拉伸效果了

四、设置顶层三个按钮

Flutter PC桌面端 控制应用尺寸是否允许放大缩小

 ///关闭窗口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,),));}
}