Flutter多窗口管理插件desktop_multi_window的使用

插件简介

desktop_multi_window 是一个Flutter插件，允许开发者在桌面应用中创建和管理多个窗口。该插件支持Windows、Linux和macOS平台。

使用方法

添加依赖

要在项目中使用这个插件，需要在 pubspec.yaml 文件中添加 desktop_multi_window 作为依赖项：

dependencies:
  desktop_multi_window: ^latest_version

请将 ^latest_version 替换为 Pub 上最新发布的版本号。

创建并显示新窗口

下面的代码展示了如何创建一个新的子窗口，并设置其位置、大小和标题等属性。

import 'package:desktop_multi_window/desktop_multi_window.dart';

// 创建新窗口
final window = await DesktopMultiWindow.createWindow(jsonEncode({
  'args1': 'Sub window',
  'args2': 100,
  'args3': true,
  'business': 'business_test',
}));

// 设置窗口的位置、大小、居中显示、标题并显示窗口
window
  ..setFrame(const Offset(0, 0) & const Size(1280, 720))
  ..center()
  ..setTitle('Another window')
  ..show();

调用远程窗口方法

由于每个窗口运行在一个独立的Flutter引擎实例上，因此我们需要使用 DesktopMultiWindow.setMethodCallHandler 和 DesktopMultiWindow.invokeMethod 来处理不同窗口之间的方法调用。

设置方法调用处理器

DesktopMultiWindow.setMethodCallHandler((call, fromWindowId) async {
  debugPrint('${call.method} ${call.arguments} $fromWindowId');
  return "result";
});

调用远程窗口的方法

final result =
    await DesktopMultiWindow.invokeMethod(windowId!, "method_name", "arguments");
debugPrint("onSend result: $result");

示例代码

以下是一个完整的示例程序，演示了如何使用 desktop_multi_window 插件来创建主窗口和子窗口，并在它们之间进行通信。

import 'dart:convert';
import 'package:collection/collection.dart';
import 'package:desktop_lifecycle/desktop_lifecycle.dart';
import 'package:desktop_multi_window/desktop_multi_window.dart';
import 'package:flutter/material.dart';
import 'event_widget.dart'; // 假设这是你自己的事件处理组件

void main(List<String> args) {
  if (args.firstOrNull == 'multi_window') {
    final windowId = int.parse(args[1]);
    final argument = args.length > 2 && args[2].isNotEmpty
        ? jsonDecode(args[2]) as Map<String, dynamic>
        : const {};
    runApp(_ExampleSubWindow(
      windowController: WindowController.fromWindowId(windowId),
      args: argument,
    ));
  } else {
    runApp(const _ExampleMainWindow());
  }
}

class _ExampleMainWindow extends StatefulWidget {
  const _ExampleMainWindow({Key? key}) : super(key: key);

  @override
  State<_ExampleMainWindow> createState() => _ExampleMainWindowState();
}

class _ExampleMainWindowState extends State<_ExampleMainWindow> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: [
            TextButton(
              onPressed: () async {
                final window =
                    await DesktopMultiWindow.createWindow(jsonEncode({
                  'args1': 'Sub window',
                  'args2': 100,
                  'args3': true,
                  'business': 'business_test',
                }));
                window
                  ..setFrame(const Offset(0, 0) & const Size(1280, 720))
                  ..center()
                  ..setTitle('Another window')
                  ..show();
              },
              child: const Text('Create a new World!'),
            ),
            TextButton(
              child: const Text('Send event to all sub windows'),
              onPressed: () async {
                final subWindowIds =
                    await DesktopMultiWindow.getAllSubWindowIds();
                for (final windowId in subWindowIds) {
                  DesktopMultiWindow.invokeMethod(
                    windowId,
                    'broadcast',
                    'Broadcast from main window',
                  );
                }
              },
            ),
            Expanded(
              child: EventWidget(controller: WindowController.fromWindowId(0)),
            )
          ],
        ),
      ),
    );
  }
}

class _ExampleSubWindow extends StatelessWidget {
  const _ExampleSubWindow({
    Key? key,
    required this.windowController,
    required this.args,
  }) : super(key: key);

  final WindowController windowController;
  final Map? args;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: [
            if (args != null)
              Text(
                'Arguments: ${args.toString()}',
                style: const TextStyle(fontSize: 20),
              ),
            ValueListenableBuilder<bool>(
              valueListenable: DesktopLifecycle.instance.isActive,
              builder: (context, active, child) {
                return Text(active ? 'Window Active' : 'Window Inactive');
              },
            ),
            TextButton(
              onPressed: () async {
                windowController.close();
              },
              child: const Text('Close this window'),
            ),
            Expanded(child: EventWidget(controller: windowController)),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们定义了一个主窗口 _ExampleMainWindow 和一个子窗口 _ExampleSubWindow。通过点击按钮可以创建新的子窗口或向所有子窗口发送广播消息。此外，还展示了如何传递参数给子窗口以及如何监听窗口的状态变化（如激活/非激活）。