您现在的位置是：首页 >技术教程 >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方法中

@override
  void initState() {
    super.initState();
    ///设置不可以手动放大缩小
    WindowUtil.setResizable(false);
  }

在允许用户改变应用大小的页面的initState方法中

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

  @override
  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,
          ),
        ));
  }
}