flutter设置windows是否显示标题栏和状态栏和全屏显示

这篇具有很好参考价值的文章主要介绍了flutter设置windows是否显示标题栏和状态栏和全屏显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flutter设置windows是否显示标题栏和状态栏和全屏显示,多端开发,flutter想要让桌面软件实现全屏和不显示状态栏或者自定义状态栏,就可以使用window_manager这个依赖库,使用起来还是非常方便的,可以自定义显示窗口大小和位置,还有设置标题栏是否展示等内容,也可以设置可拖动区域。官方仓库地址:window_manager | Flutter Package

github仓库地址:https://github.com/leanflutter/window_manager 

安装依赖

在pubspec.yaml文件中添加依赖:window_manager: ^0.3.7 ,并更新依赖库:pub get

flutter设置windows是否显示标题栏和状态栏和全屏显示,多端开发,flutter

初始化window

在main.dart中配置初始化:

void main() async {
  await windowManager.ensureInitialized();
  WindowOptions windowOptions = const WindowOptions(
  minimumSize: Size(400, 300),//设置窗口的最小尺寸
  maximumSize: Size(800, 600),//设置窗口的最大尺寸
  //window 设置窗口的初始尺寸
  size: Size(800, 500),
  //窗口是否居中
  center: true,
  //设置窗口的边缘背景色:是否透明
  backgroundColor: Colors.transparent,
  //true 表示在状态栏不显示程序:就是windows最底部的状态
  skipTaskbar: false,
 //true 表示设置Window一直位于最顶层:置顶
  alwaysOnTop: false,
  //hidden 表示隐藏标题栏 normal 窗体标题栏
  titleBarStyle: TitleBarStyle.normal,
  //设置窗口的标题:
  title: "WindowSettingTest",
);
windowManager.waitUntilReadyToShow(windowOptions, () async {
  //显示窗口
  await windowManager.show();
  //聚焦窗口
  await windowManager.focus();
  //ture设置窗口不可缩放 false 设置窗口可以缩放
  windowManager.setResizable(true); 
  //设置窗口缩放宽高比
  windowManager.setAspectRatio(1.3); 
  //设置窗口是否支持阴影
  windowManager.setHasShadow(true);
  //设置窗口模式:亮色模式和暗色模式
  windowManager.setBrightness(Brightness.dark);
});
  runApp(MyApp());
  }

配置标题栏不显示和背景色为绿色的样子: 

flutter设置windows是否显示标题栏和状态栏和全屏显示,多端开发,flutter

可拖拽设置

没有标题栏的话, 可能就没办法让窗口全屏或者退出全屏,或者没办法拖拽软件窗口位置,所以需要配置可拖拽,其实也很简单,只需要使用 DragToMoveArea 包裹一下可拖拽的内容即可:

flutter设置windows是否显示标题栏和状态栏和全屏显示,多端开发,flutter

监听窗口的退出键

混入WindowListener->监听Window事件->配置Window关闭按钮可拦截->重写Window的close事件

class _MyHomePageState extends State<MyHomePage> with WindowListener {

  @override
  void initState() {
    super.initState();
    //监听Window事件
    windowManager.addListener(this);
    //配置Window关闭按钮可拦截
    windowManager.setPreventClose(true);
  }


  @override
  void dispose() {
    windowManager.removeListener(this);
    super.dispose();
  }

  @override
  void onWindowEvent(String eventName) {
    print("event:$eventName");
    super.onWindowEvent(eventName);
  }

  @override
  void onWindowBlur() {
    print("onWindowBlur");
    super.onWindowBlur();
  }

 //重写Window的close事件
  @override
  void onWindowClose() async {
    var isPreventClose = await windowManager.isPreventClose();
    if (!context.mounted) return;
    if (isPreventClose) {
      print("custom close  action");
      showDialog(
          context: context,
          builder: (_) {
            return AlertDialog(
              title: const Text("提示"),
              actions: [
                TextButton.icon(
                    onPressed: () {
                      Navigator.of(context).pop();
                      windowManager.destroy();
                    },
                    icon: const Icon(Icons.close),
                    label: const Text("确认")),
                TextButton.icon(
                    onPressed: () {
                      print("取消");
                      Navigator.of(context).pop();
                      var height = MediaQuery.of(context).size.height;
                      var width = MediaQuery.of(context).size.width;
                      print("size:${MediaQuery.of(context).size}");
                      print("size:${window.physicalSize}");
                      print("size:${MediaQuery.of(context).devicePixelRatio}");
                      print(
                          "size:height${MediaQuery.of(context).devicePixelRatio * height},width:${MediaQuery.of(context).devicePixelRatio * width}");
                    },
                    icon: const Icon(Icons.remove),
                    label: const Text("取消")),
              ],
            );
          });
    } else {
      print("use system close action");
    }
    print("onWindowClose");
    super.onWindowClose();
  }

  @override
  void onWindowDocked() {
    print("onWindowDocked");
    super.onWindowDocked();
  }

  @override
  void onWindowEnterFullScreen() {
    print("onWindowEnterFullScreen");
    super.onWindowEnterFullScreen();
  }

  @override
  void onWindowFocus() {
    // TODO: implement onWindowFocus
    super.onWindowFocus();
    print("onWindowEnterFullScreen");
    setState(() {});
  }

  @override
  void onWindowLeaveFullScreen() {
    // TODO: implement onWindowLeaveFullScreen
    super.onWindowLeaveFullScreen();
    print("onWindowLeaveFullScreen");
  }

  @override
  void onWindowMaximize() {
    // TODO: implement onWindowMaximize
    super.onWindowMaximize();
    print("onWindowMaximize");
  }

  @override
  void onWindowMinimize() {
    // TODO: implement onWindowMinimize
    super.onWindowMinimize();
    print("onWindowMinimize");
  }

  @override
  void onWindowMove() {
    // TODO: implement onWindowMove
    super.onWindowMove();
    print("onWindowMove");
  }

  @override
  void onWindowMoved() {
    // TODO: implement onWindowMoved
    super.onWindowMoved();
    print("onWindowMove");
  }

  @override
  void onWindowResize() {
    // TODO: implement onWindowResize
    super.onWindowResize();
    print("onWindowResize");
  }

  @override
  void onWindowResized() {
    // TODO: implement onWindowResized
    super.onWindowResized();
    print("onWindowResized");
  }

  @override
  void onWindowRestore() {
    // TODO: implement onWindowRestore
    super.onWindowRestore();
    print("onWindowRestore");
  }

  @override
  void onWindowUndocked() {
    // TODO: implement onWindowUndocked
    super.onWindowUndocked();
    print("onWindowUndocked");
  }

  @override
  void onWindowUnmaximize() {
    // TODO: implement onWindowUnmaximize
    super.onWindowUnmaximize();
    print("onWindowUnmaximize");
  }

自定义标题栏 

标题栏新增功能按钮及自定义标题栏,实现窗口的最大化、最小化、恢复为上一次的状态、关闭;

隐藏原有标题栏->自定义标题栏->调用Window API实现相关API

class _TitleBarWidgetState extends State<TitleBarWidget> {
  @override
  Widget build(BuildContext context) {
    var iconSize = const Size(14, 14);
    var backgroundSize = const Size(30, 30);
    var maxButtonIcons = WindowButtonIcons(
        SvgPicture.asset('assets/images/max.svg'),
        SvgPicture.asset('assets/images/max.svg'),
        SvgPicture.asset('assets/images/max.svg'));

    var minButtonIcons = WindowButtonIcons(
        SvgPicture.asset('assets/images/min.svg'),
        SvgPicture.asset('assets/images/min.svg'),
        SvgPicture.asset('assets/images/min.svg'));
    var closeButtonIcons = WindowButtonIcons(
        SvgPicture.asset('assets/images/close.svg'),
        SvgPicture.asset('assets/images/close_down.svg'),
        SvgPicture.asset('assets/images/close_mouse_over.svg'));
    return Container(
      padding: EdgeInsets.all(titleBarTopAndBottomMargin),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
        //可拖动区域
          Expanded(
              child: DragToMoveArea(
                child: Container(),
              )),
         // 可任意添加其他功能按钮     
           ...
              
          //自定义最小化按钮
          MinimizeWindowButton(
            backgroundSize:backgroundSize,
            iconSize:iconSize,
            icons: minButtonIcons,
          ),
          //自定义最大化按钮
          MaximizeWindowButton(
            backgroundSize:backgroundSize,
            iconSize: iconSize,
            icons: maxButtonIcons,
            // onPressed: (){
            //   updateRegistryTest(true);
            // },
          ),
          //自定义关闭窗口按钮
          CloseWindowButton(
            backgroundSize: backgroundSize,
            iconSize: iconSize,
            icons: closeButtonIcons,
          ),
        ],
      ),
    );
  }
}

窗口最大化最小化:文章来源地址https://www.toymoban.com/news/detail-818431.html

windowManager.maximize()   窗口最大化
windowManager.minimize()  窗口最小化
windowManager.restore() 窗口恢复到之前状态
windowManager.setAlwaysOnTop()  设置窗口置顶
windowManager.setAlwaysOnBottom()  设置窗口置底
windowManager.close() 关闭窗口
 windowManager.destroy() 强制销毁窗口

到了这里,关于flutter设置windows是否显示标题栏和状态栏和全屏显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Android 标题栏、状态栏、系统栏、导航栏、应用栏及各个位置的颜色设置

    如上图,可以看到,有状态栏(status bar)、标题栏(action bar, toolbar)、导航栏(navigation bar) 等, 状态栏 (status bar):是指手机最顶上,显示中国移动、安全卫士、电量、网速等等,在手机的顶部。下拉就会出现通知栏。 标题栏就是指action bar/toolbar,app程序最上边的titlebar。关于acti

    2023年04月16日
    浏览(39)
  • APP开发_ js 控制手机是否显示状态栏

    这个方法允许设置系统 UI 的可见性,包括状态栏。你可以通过组合不同的标志来实现不同的效果。 示例代码: 常用的标志: View.SYSTEM_UI_FLAG_FULLSCREEN: 隐藏状态栏。 View.SYSTEM_UI_FLAG_HIDE_NAVIGATION: 隐藏导航栏。 View.SYSTEM_UI_FLAG_IMMERSIVE: 沉浸式模式,允许用户通过滑动屏幕边缘来显

    2024年04月28日
    浏览(47)
  • Winform中DataGridView设置前景色、单元格背景色、标题栏样式、禁止改变高宽、不显示空白行、清除选中样式、填充数据源、设置标题、设置单列宽度

    Winform中使用DataGridView实现加载数据并显示在led大屏中。 需要设置整个DataGridView的前景色、背景色、单元格颜色、标题栏样式、禁止 改变行高、列宽、不显示新增行、取消选中样式等。 注: 博客: 霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 1、DateGridView实现黑

    2023年04月15日
    浏览(68)
  • 【word日常操作】word里面表格已经设置了重复标题行,但是显示无效怎么办

    在制作表格的过程当中,相信很多人都知道,表格不只有一页的时候就会在下一面,也会显示出来,然而这时我们需要让word表头重复出现,那么该怎么办呢? word表格如何设置多页时能重复表头,百度后出现了如下步骤: 按照上述步骤设置后,如下所示: 点击确定后,下一页

    2024年02月08日
    浏览(50)
  • Android隐藏导航栏和状态栏的方法

    一。去除状态栏 以下是Android去除状态栏的代码示例: 1. 在Activity的onCreate()方法中添加以下代码: getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); 2. 在AndroidManifest.xml文件中的Activity节点中添加以下属性: android:theme=\\\"@android:style/Theme.NoTitleB

    2024年02月16日
    浏览(40)
  • uniapp使用自定义导航栏和手机自带的状态栏重叠

    【问题界面】: 【正常界面】: 【解决方法】: 在页面顶部添加代码 !-- #ifndef H5 -- statusBar/statusBar !-- #endif -- 2.引入占位条并注册

    2024年02月15日
    浏览(37)
  • CSS_IOS适配状态栏和IOS底部安全区域

    计算属性 先constant再env 计算属性 safe-area-inset-left: 安全区域距离左边界的距离 safe-area-inset-right: 安全区域距离右边界的距离 safe-area-inset-top: 安全区域距离顶部边界的距离 safe-area-inset-bottom: 安全区域距离底部边界的距离

    2024年02月10日
    浏览(40)
  • flutter实战(01)windows桌面版 修改应用logo、名称、显示位置、显示大小

    说明:该系列文章主要为flutter在windows桌面平台实战中遇到的一些坑。 只需要在flutter项目/windows/runner/resources目录下替换原来的应用图标 app_icon.ico即可。 修改flutter项目/windows/runner/main.cpp 文件,在函数wWinMain中修改,代码如下: 说明:如果中文显示乱码,那么就使用notpad++编

    2024年01月25日
    浏览(86)
  • 在uniapp中获取微信小程序状态栏和导航栏的高度

    在微信小程序中,可以使用  uni.getSystemInfo()  方法获取设备的系统信息,包括状态栏的高度和顶部导航栏的高度。您可以使用这些信息计算顶部图标距离。 下面是一个示例代码,展示如何在 UniApp 中获取顶部图标距离: 在上述示例代码中,我们通过调用  uni.getSystemInfo()  方

    2024年02月07日
    浏览(46)
  • Flutter 在 windows 上的开发环境设置

    此页面的链接: Important: If you’re in China, first read Using Flutter in China. 如果是用的帆樯的话,估计不用看。 对应的网页对如何在 windows 上搭建 flutter 开发环境也有十分详细的说明: https://docs.flutter.dev/get-started/install/windows 将(当前最新版)flutter_windows_3.0.3-stable.zip 下载到本机上

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包