Flutter GUI组件库插件flutter_mdi_gui的使用

Flutter GUI组件库插件flutter_mdi_gui的使用

此包为Flutter应用程序提供了多文档界面（MDI），重点在于速度、易于使用和可扩展性。该代码受Achref Faidi的FlutterGUI启发，并使用Provider进行状态管理。

示例项目位于/example文件夹中。

开始使用

安装

1. 在pubspec.yaml文件中添加依赖项：

dependencies:
  flutter_mdi_gui: <最新版本>

1. 运行以下命令以获取依赖项：

flutter pub get

1. 导入包：

import 'package:flutter_mdi_gui/flutter_mdi_gui.dart';

实现

1. 将FlutterMdi添加到应显示所有窗口的树中：

MaterialApp(
  home: Scaffold(
      appBar: AppBar(
        title: const Text('MDI Example'),
      ),
      body: FlutterMdi(
        mdiConfig: const MdiConfig(
          borderRadius: 3.0,
          defaultHeaderColor: Colors.blueAccent,
        ),
        child: Text("你的应用在这里")
      ),
  )
);

1. 使用MdiController.addWindowTo方法创建一个窗口：

TextButton(
  child: const Text("创建静态窗口"),
  onPressed: () {
    MdiController.addWindowTo(
      context,
      title: "样本静态窗口",
      body: const Text("这是一个样本静态窗口"),
    );
  },
);

1. 使用MdiController.closeWindowIn方法从窗口树下的任何位置关闭窗口：

TextButton(
  onPressed: () {
    MdiController.closeWindowIn(context);
  },
  child: const Text("从窗口小部件内移除我"),
);

已知限制

• Mac桌面不支持向上箭头和向下箭头光标，参见：https://github.com/flutter/flutter/issues/89351

截图

完整示例代码

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

import 'sample_widgets/sample_clock_body.dart';
import 'sample_widgets/sample_info_body.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('MDI 示例'),
          ),
          body: FlutterMdiGui(
            mdiConfig: const MdiConfig(
              borderRadius: 3.0,
              defaultBodyColor: Color.fromRGBO(255, 255, 255, 0.9),
              defaultHeaderColor: Color.fromRGBO(12, 12, 255, 0.3),
            ),
            child: Builder(builder: (context) {
              return Center(
                child: Column(
                  children: [
                    TextButton(
                        child: const Text("创建静态窗口"),
                        onPressed: () {
                          MdiController.addWindowTo(context,
                              title: "带有状态信息的样本窗口",
                              minWidth: 455.0,
                              minHeight: 300.0,
                              body: const SampleInfoBody());
                        }),
                    TextButton(
                        child: const Text("创建刷新窗口"),
                        onPressed: () {
                          MdiController.addWindowTo(context,
                              title: "带有状态信息和自更新时钟的样本窗口",
                              minWidth: 455.0,
                              minHeight: 300.0,
                              body: const SampleClockBody());
                        }),
                  ],
                ),
              );
            }),
          )),
    );
  }
}