flutter windows使用多窗口方法

最近研究flutter在Windows和MacOs操作系统上使用多窗口方法，总结一下开发心得。

众所周知，flutter使用skia将像素点，通过opengl，software，metal等方式渲染到一个窗口上，不像原生开发的可以指定控件添加到具体窗口内。

在flutter pub仓库管理中，看了几个大神写的多窗口方案，无一例外都是通过加载多个flutter engine实例，即一个窗口一个flutter engine实例创建多窗口，

通过底层（c++，swift）使用EventSink实现两个窗口之间通讯，使用这种方式无需改动flutter engine源码，集成多窗口plugin开发即可，

但这个方案同样存在几个问题：

1.加载新窗口时间过长：创建多个窗口时，需要加载一个新的dart vm环境，同时创建一个新的flutter engine对象，创建新的窗口需要等待几秒，如果在7代i5的设备上，

甚至长达10秒左右。

2.窗口之间数据共享复杂：创建新的窗口，主窗口需要将数据传输到新窗口，一旦两个窗口之间数据通讯越来越多，对于后期开发来说，简直是个灾难。

3.增加内存开销：前面说了，每个窗口之间创建需要重新创建一个dart vm，就是要加载一个新的dart源码文件，一个空的flutter demo的源码so文件，

就有10多m，加载到内存中占多100m。

针对以上几个问题，我下载了flutter engine的源码进行小修改，使其更加简单开发。

先看看dart中我的创建新窗口思路源码：

class MyWindow {
  final WindowID id;
  final String title;
  late SingletonFlutterWindow subwindow;
  double width;
  double height;
  int x;
  int y;

  late WindowEventListener listener;

  MyWindow(
      {required this.title,
      required this.id,
      this.width = 1280,
      this.height = 720,
      this.x = 0,
      this.y = 0,
      bool bMaximize = false}) {
    MultiWindow.create(
            title: title,
            id: id.index,
            width: width,
            height: height,
            x: x,
            y: y,
            bMaximize: bMaximize)
        .then((value) {
      if (value == true) {
        Timer.run(
          () {
            //要等窗口大小回来
            onCreateWindowSuccess();
          },
        );

        listener.addEventListener();
      }
    });
    listener = WindowEventListener(id.index);
  }

  void onCreateWindowSuccess() {
    subwindow =
        SingletonFlutterWindow(this.id.index, PlatformDispatcher.instance);
    WidgetsFlutterBinding widgetsBinding =
        WidgetsFlutterBinding(bindingWindow: subwindow);
    WindowManager.instance.setCurWidgetBinding(widgetsBinding);
    widgetsBinding.scheduleAttachRootWidget(build());
    widgetsBinding.scheduleWarmUpFrame();
  }

  Widget build() {
    return Container();
  }
}

新窗口继承MyWindow，

import 'package:flutter/material.dart';
import 'package:flutter_app/UI/BaseWindow/MyWindow.dart';

class DemoWindow extends MyWindow {
  String key = "";
  DemoWindow(
      {required String title,
      required WindowID id,
      required double width,
      required double height,
      required int x,
      required int y,
      required bool bMaximize})
      : super(
            title: title,
            id: id,
            width: width,
            height: height,
            x: x,
            y: y,
            bMaximize: bMaximize) {
    key = "chart${id.index}";
  }

  @override
  Widget build() {
    return MaterialApp(home: DemoWindowHome(this));
  }
}

class DemoWindowHome extends StatefulWidget {
  DemoWindow window;

  DemoWindowHome(this.window);

  @override
  State<DemoWindowHome> createState() => _DemoWindowHomeState();
}

class _DemoWindowHomeState extends State<DemoWindowHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blue,
        body: Center(
            child: Column(
          children: [
            Container(
                width: 200, height: 100, color: Colors.red, child: TextField()),
            MaterialButton(
              onPressed: () {},
              child: Text("sec wind"),
            )
          ],
        )));
  }
}

只要调用

DemoWindow newWindow =  DemoWindow（）;

这样在一个dart创建中，就能创建一个新的窗口了，并且可以使用现有窗口的环境的数据，而且打开新的窗口的时间更原生几乎一样。

转载请注明出处，from博客园HemoJohn，有偿指导加q：980550823