Flutter桌面窗口管理库bitsdojo_window使用指南

Viewed 0

对于高级的多窗口管理,请参考文章《Flutter桌面端应用多窗口管理》。
本文介绍当前Flutter桌面应用开发中自定义桌面窗口的模块bitsdojo_window。它允许你在Windows、macOS和Linux上构建原生桌面应用程序。bitsdojo_window模块提供了一种简化窗口管理、自定义窗口外观和交互的方法,使开发者能够更轻松地构建具有桌面风格的应用程序。

1. 概述

bitsdojo_window库为Flutter桌面应用开发提供了强大的支持,提供了一种简化的方式来管理和自定义桌面窗口,主要目标是使开发者能够更轻松地构建具有桌面风格的应用程序。该库支持在Windows、macOS和Linux上构建原生桌面应用程序,提供了一系列API,使得开发者可以轻松控制窗口的大小、位置、最小化、最大化、全屏、关闭等操作,并允许自定义窗口的外观,包括标题、图标、背景颜色等。使用bitsdojo_window,开发者可以专注于应用程序的核心功能,而不需要花费大量时间在窗口管理上,从而使Flutter桌面应用开发变得更加简单和高效。

2. 安装和设置

2.1 添加 bitsdojo_window 依赖

要在Flutter项目中使用bitsdojo_window,首先需要在项目的pubspec.yaml文件中添加依赖。以下是添加依赖的步骤:

dependencies:
  flutter:
    sdk: flutter
  bitsdojo_window: ^0.1.5

然后在终端中运行下面的命令,以获取bitsdojo_window的依赖包;或者直接运行add命令以安装其最新的版本:

flutter pub add bitsdojo_window

2.2 初始化 bitsdojo_window

在添加了bitsdojo_window的依赖之后,需要在项目中初始化bitsdojo_window。在项目的main.dart文件中导入库,并在main()函数中调用doWhenWindowReady()函数,以确保窗口准备就绪后再进行初始化。示例如下:

import 'package:bitsdojo_window/bitsdojo_window.dart';

void main() {
  // 处理原生和Flutter通信
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
  // 在这里配置bitsdojo_window
  doWhenWindowReady(() {
    final win = appWindow;
    final initialSize = Size(600, 450);
    win.minSize = initialSize;
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.title = "My Flutter App";
    win.show();
  });
}

在上述代码中,doWhenWindowReady()函数会等待窗口准备就绪后再进行初始化。appWindowbitsdojo_window库提供的一个全局对象,用于访问和控制应用程序的窗口。通过appWindow对象,可以设置窗口的最小大小、当前大小、位置、标题等属性,并可以显示窗口。至此,bitsdojo_window的安装和设置就完成了。

2.3 配置原生代码

在Windows上,需要在windows\runner\main.cpp文件中添加以下两行代码:

#include<bitsdojo_window_windows/bitsdojo_window_plugin.h>
auto bdw = bitsdojo_window_configure(BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP);

完成后保存。

在macOS上,需要在macos\runner\MainFlutterWindow.swift文件中进行以下修改:

import FlutterMacOS
import bitsdojo_window_macos // 添加这行
class MainFlutterWindow: BitsdojoWindow {
  override func bitsdojo_window_configure() -> UInt {
    return BDW_CUSTOM_FRAME | BDW_HIDE_ON_STARTUP
  }
  // 其余代码
}

其中,如果你不想使用自定义框架而喜欢标准窗口标题栏和按钮,可以删除BDW_CUSTOM_FRAME;如果不想在启动时隐藏窗口,可以删除BDW_HIDE_ON_STARTUP

3. 窗口管理

3.1 控制窗口的大小和位置

使用bitsdojo_window,你可以轻松地控制窗口的大小和位置。以下是如何进行操作的示例:

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;
    final initialSize = Size(800, 600);
    win.minSize = Size(600, 450);
    win.size = initialSize;
    win.alignment = Alignment.center;
    win.show();
  });
}

在上述代码中,minSize属性用于设置窗口的最小大小,size属性用于设置窗口的当前大小,alignment属性用于设置窗口的位置。例如,Alignment.center会将窗口置于屏幕中心。

3.2 窗口的最小化、最大化、全屏和关闭操作

bitsdojo_window提供了一系列的函数,用于进行窗口的最小化、最大化、全屏和关闭操作。以下是如何进行操作的示例:

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;
    // 最小化窗口
    win.minimize();
    // 最大化窗口
    win.maximize();
    // 全屏显示窗口
    win.showFullScreen();
    // 关闭窗口
    win.close();
  });
}

在上述代码中,minimize()函数用于最小化窗口,maximize()函数用于最大化窗口,showFullScreen()函数用于全屏显示窗口,close()函数用于关闭窗口。请注意,这些操作通常会在响应用户的某些操作(例如点击按钮)时进行,而不是在main()函数中直接进行。

3.3 判断窗口是否已经最大化

可以使用appWindow.isMaximized属性来判断窗口是否已经最大化。如果窗口已经最大化,可以使用RestoreWindowButton组件来显示一个恢复窗口的按钮;如果窗口没有最大化,可以使用MaximizeWindowButton组件来显示一个最大化窗口的按钮。示例如下:

appWindow.isMaximized
    ? RestoreWindowButton(colors: buttonColors, onPressed: maximizeOrRestore)
    : MaximizeWindowButton(colors: buttonColors, onPressed: maximizeOrRestore)

4. 自定义窗口外观

4.1 自定义窗口的标题和图标

使用bitsdojo_window,你可以轻松地自定义窗口的标题和图标。以下是如何进行操作的示例:

void main() {
  runApp(MyApp());
  doWhenWindowReady(() {
    final win = appWindow;
    // 设置窗口标题
    win.title = "My Custom Title";
    // 设置窗口图标
    win.icon = "assets/icon.png";
  });
}

在上述代码中,title属性用于设置窗口的标题,icon属性用于设置窗口的图标。请注意,图标文件应该是项目的资源文件,需要在pubspec.yaml文件中进行声明。

4.2 自定义窗口的背景颜色

bitsdojo_window也允许你自定义窗口的背景颜色。你可以通过Flutter的MaterialAppCupertinoApp的theme属性来设置窗口的背景颜色。以下是如何进行操作的示例:

import 'package:flutter/material.dart';
import 'package:bitsdojo_window/bitsdojo_window.dart';

void main() {
  runApp(const MyApp());
  doWhenWindowReady(() {
    const initialSize = Size(600, 450);
    appWindow.minSize = initialSize;
    appWindow.size = initialSize;
    appWindow.alignment = Alignment.center;
    appWindow.title = "Custom Window";
    appWindow.show();
  });
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // 设置窗口的背景颜色
        scaffoldBackgroundColor: Colors.blue,
      ),
      home: const Scaffold(
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在上述代码中,通过scaffoldBackgroundColor属性设置窗口的背景颜色。你可以选择任何你喜欢的颜色。

4.3 自定义窗口按钮的颜色

可以使用WindowButtonColors类来设置窗口按钮的颜色。例如,可以设置最小化、最大化和关闭按钮的颜色。示例如下:

final buttonColors = WindowButtonColors(
  normal: Colors.blue.withOpacity(.2),
  iconNormal: Colors.blue,
  mouseOver: Colors.red,
  mouseDown: Colors.green,
  iconMouseOver: Colors.white,
  iconMouseDown: Colors.orange,
);

然后,可以使用这个buttonColors对象来设置按钮的颜色:

MinimizeWindowButton(colors: buttonColors)
MaximizeWindowButton(colors: buttonColors)

5. 高级功能

5.1 窗口的拖拽操作

bitsdojo_window提供了一种简单的方式来实现窗口的拖拽操作。你可以使用MoveWindow组件来包裹你希望用于拖拽窗口的部分。例如:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: MoveWindow(
            child: Text('My Custom Title'),
          ),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

在上述代码中,MoveWindow组件包裹了标题文本,这意味着用户可以通过拖拽标题文本来移动窗口。

5.2 窗口的缩放操作

bitsdojo_window也提供了一种简单的方式来实现窗口的缩放操作。你可以使用ResizeWindow组件来包裹你希望用于缩放窗口的部分,并指定缩放的方向。以下是如何进行操作的示例:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            MyHomePage(),
            Positioned(
              right: 0,
              bottom: 0,
              child: ResizeWindow(
                width: 10,
                height: 10,
                edge: WindowEdge.bottomRight,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上述代码中,ResizeWindow组件被放置在窗口的右下角,用户可以通过拖拽这个部分来缩放窗口。edge属性用于指定缩放的方向,WindowEdge.bottomRight表示从右下角进行缩放。通过这些高级功能,你可以提供更丰富的交互体验,使你的Flutter桌面应用程序更加易用和友好。

0 Answers