如何使用Flutter的desktop_multi_window包为新窗口添加内容？

desktop_multi_window创建的子窗口是独立的Flutter运行实例，默认会复用主入口的Widget，所以要实现自定义内容，得在入口处区分主窗口和子窗口，加载不同的UI。

具体实现步骤 #

• 第一步：在main函数里判断当前窗口类型，获取子窗口启动参数
• 第二步：为子窗口单独编写自定义Widget，根据传递的参数渲染内容

完整代码示例 #

import 'package:flutter/material.dart';
import 'package:desktop_multi_window/desktop_multi_window.dart';
import 'dart:convert';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 获取窗口启动参数，子窗口会拿到创建时传入的JSON字符串
  final windowArgs = await DesktopMultiWindow.getArgs();
  if (windowArgs != null) {
    // 解析参数，初始化子窗口
    final params = jsonDecode(windowArgs);
    runApp(SubWindow(params: params));
    return;
  }
  
  // 主窗口初始化逻辑
  runApp(const MainWindow());
}

// 主窗口UI
class MainWindow extends StatelessWidget {
  const MainWindow({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('主窗口')),
        body: Center(
          child: ElevatedButton(
            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('打开子窗口'),
          ),
        ),
      ),
    );
  }
}

// 子窗口UI（完全自定义）
class SubWindow extends StatelessWidget {
  final Map<String, dynamic> params;

  const SubWindow({super.key, required this.params});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text(params['args1'] ?? '自定义子窗口')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('参数args2: ${params['args2']}'),
              Text('参数args3: ${params['args3']}'),
              Text('业务标识: ${params['business']}'),
              const SizedBox(height: 20),
              const Text('这是子窗口的专属自定义内容！'),
            ],
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 通过DesktopMultiWindow.getArgs()判断是否为子窗口：主窗口返回null，子窗口会返回创建时传入的JSON参数
• 子窗口的UI完全独立编写，不会复用主窗口内容，你可以根据params里的参数动态调整UI
• 如果需要多种类型的子窗口，可通过business参数做分支判断，加载不同的子Widget

内容的提问来源于stack exchange，提问作者Buddhika