Flutter面板管理插件panels的使用

Warning: Beta

Panels

Panels 是一个 Flutter 包，旨在提供一组有用的桌面 UI 面板，这些面板可以移动、停靠和选项卡化，就像我们在更强大的桌面应用程序中期望的那样。

特性

✅ 可拖动面板
✅ 可调整大小的面板
✅ 正确的鼠标光标
✅ 面板内的选项卡
❌ 使所有面板可以彼此停靠
❌ 自定义面板主题
- ✅ 可定制的关闭按钮
- ✅ 可定制的上下文菜单
- ❌ 可定制的选项卡
- ✅ 可定制的框架
- ❌ 可定制的顶部栏

Demo

ezgif com-gif-maker

默认主题

ThemeData.light()

ThemeData.dark()

FrostedPanelsTheme

ThemeData.light()

ThemeData.dark()

Under the hood

有 10 个鼠标区域和监听器（所有边角 + 中间的大区域 + 可拖动的），根据其功能改变鼠标的外观。可以在这些区域中的任何一个点击窗口以使其选中（置于顶层）。

ezgif com-gif-maker (1)

有一个名为 <code>Panels</code> 的 InheritedWidget，它由一个名为 <code>PanelsManager</code> 的 StatefulWidget 创建。 PanelsManager 的子项被放入堆栈中。要添加面板/窗口，只需执行以下操作：

Panels.of(context).addPanel(widget: Widget, title: "Title of Panel");

从任何 Widget 从 PanelsManager (Panels) 的后代上下文中创建一个。

有关示例，请参阅 examples 目录。

完整示例代码

以下是使用 panels 插件的完整示例代码：

import 'package:flutter/material.dart';
import 'package:panels/panels.dart';
import 'package:panels/themes.dart';

void main() {
  runApp(ExampleApplication());
}

class ExampleApplication extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(primaryColor: Colors.purpleAccent),
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: PanelsTheme(
        data: PanelsThemeData(), // 使用默认主题
        child: PanelsManager(children: [MyCustomWidget()]),
      ),
    );
  }
}

class MyCustomWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: Column(
        children: [
          Expanded(
            child: Center(
              child: Text("My Custom Widget"),
            ),
          ),
          Expanded(
            child: Center(
              child: MaterialButton(
                color: Theme.of(context).primaryColor,
                onPressed: () {
                  Panels.of(context).addPanel(
                      widget: MyCustomWidget(), title: "Opened From MyCustomWidget()");
                },
                child: Text("Test"),
              ),
            ),
          )
        ],
      ),
    ));
  }
}

更多关于Flutter面板管理插件panels的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼•4 天前

更多关于Flutter面板管理插件panels的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

panels 是一个用于 Flutter 的面板管理插件，它允许你在应用中创建可拖拽、可调整大小的面板。这个插件非常适合用于需要多窗口或多面板布局的应用场景，比如仪表盘、编辑器、或者任何需要灵活布局的应用。

安装

首先，你需要在 pubspec.yaml 文件中添加 panels 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  panels: ^0.1.0  # 请检查最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

panels 插件的核心是 Panel 和 PanelContainer 组件。Panel 代表一个可拖拽、可调整大小的面板，而 PanelContainer 是这些面板的容器。

1. 创建一个简单的面板

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PanelContainer(
          children: [
            Panel(
              child: Center(child: Text('Panel 1')),
            ),
            Panel(
              child: Center(child: Text('Panel 2')),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个 PanelContainer，并在其中放置了两个 Panel。每个 Panel 包含一个简单的 Text 组件。

2. 自定义面板大小和位置

你可以通过 initialSize 和 initialPosition 属性来设置面板的初始大小和位置。

Panel(
  initialSize: Size(200, 150),
  initialPosition: Offset(50, 50),
  child: Center(child: Text('Custom Sized Panel')),
),

3. 面板的最小和最大大小

你可以通过 minSize 和 maxSize 属性来限制面板的最小和最大大小。

Panel(
  minSize: Size(100, 100),
  maxSize: Size(300, 300),
  child: Center(child: Text('Resizable Panel')),
),

4. 面板的标题栏

你可以通过 title 属性为面板添加一个标题栏。

Panel(
  title: Text('Panel Title'),
  child: Center(child: Text('Panel with Title')),
),

5. 面板的关闭按钮

你可以通过 showCloseButton 属性来显示或隐藏面板的关闭按钮。

Panel(
  showCloseButton: true,
  child: Center(child: Text('Panel with Close Button')),
),

高级用法

1. 动态添加和移除面板

你可以通过 PanelContainer 的 addPanel 和 removePanel 方法来动态添加和移除面板。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final PanelContainerController _controller = PanelContainerController();

  void _addPanel() {
    _controller.addPanel(
      Panel(
        child: Center(child: Text('New Panel')),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Panels Example'),
          actions: [
            IconButton(
              icon: Icon(Icons.add),
              onPressed: _addPanel,
            ),
          ],
        ),
        body: PanelContainer(
          controller: _controller,
          children: [
            Panel(
              child: Center(child: Text('Initial Panel')),
            ),
          ],
        ),
      ),
    );
  }
}

2. 保存和恢复面板布局

你可以使用 PanelContainerController 来保存和恢复面板的布局。

void _saveLayout() {
  final layout = _controller.saveLayout();
  // 保存布局到本地存储
}

void _restoreLayout() {
  // 从本地存储加载布局
  _controller.restoreLayout(savedLayout);
}