Flutter面板管理插件panely的使用

特性

Panely 是一个为 Flutter Web 设计的完整、响应式且开箱即用的仪表板组件。它可以帮助开发者快速构建功能强大的管理界面。

使用方法

要使用 Panely 插件，可以参考以下示例代码。此代码展示了一个完整的示例项目，包括侧边栏菜单和主页面切换功能。

示例代码

以下是 main.dart 文件的完整代码示例：

// 导入必要的包
import 'package:example/pages/elements_page.dart'; // 示例页面
import 'package:example/pages/empty_page.dart';       // 示例页面
import 'package:example/pages/navigation_page.dart';  // 示例页面
import 'package:example/pages/settings_page.dart';    // 示例页面
import 'package:flutter/material.dart';                // Flutter核心库
import 'package:panely/components/sidebar/sidebar_widget.dart'; // 侧边栏组件
import 'package:panely/controller.dart';              // 控制器类
import 'package:panely/components/sidebar/sidebar.dart'; // 侧边栏
import 'package:panely/components/sidebar/sidebar_configuration.dart'; // 配置类
import 'package:panely/panely.dart';                  // 主组件

void main() {
  runApp(MainApp()); // 启动应用
}

// 自定义应用类
class MainApp extends StatelessWidget {
  MainApp({super.key});

  // 创建Panely控制器实例
  final PanelyController controller = PanelyController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      // 可选主题设置（取消注释以启用深色模式）
      // theme: ThemeData.dark(),
      home: Panely(
        // 设置Panely控制器
        controller: controller,
        // 设置面板标题
        panelTitle: "Panely - 仪表板",
        // 定义侧边栏
        sidebar: PanelySidebar(
          // 配置侧边栏视图模式
          configuration: const PanelySidebarConfiguration(
            viewMode: PanelySidebarViewMode.responsive, // 响应式模式
          ),
          // 定义侧边栏菜单项
          menuItems: [
            // 第一项：导航示例页面
            PanelySidebarButton(
              title: "导航示例",
              icon: Icons.home,
              page: NavigationPage(),
            ),
            // 第二项：空页面
            PanelySidebarButton(
              title: "空页面",
              page: EmptyPage(),
            ),
            // 第三项：UI组件页面
            PanelySidebarButton(
              title: "UI 组件",
              icon: Icons.tab,
              page: ElementsPage(),
            ),
            // 分隔符
            const PanelySidebarSpacer(),
            const PanelySidebarDivider(),
            // 第四项：设置页面
            PanelySidebarButton(
              title: "设置",
              icon: Icons.settings,
              page: SettingsPage(),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


panely 是一个用于 Flutter 的面板管理插件，它可以帮助开发者轻松地创建和管理可拖拽、可折叠的面板。这个插件特别适合用于需要自定义界面布局的应用，比如需要侧边栏、底部面板或可拖拽的浮动面板的场景。

安装 panely

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

dependencies:
  flutter:
    sdk: flutter
  panely: ^1.0.0  # 请检查最新版本

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

基本使用

以下是一个简单的示例，展示了如何使用 panely 创建一个可拖拽的面板：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Panely Example'),
        ),
        body: PanelContainer(
          child: Panel(
            controller: PanelController(),
            initialPosition: PanelPosition.right,
            minSize: 150.0,
            maxSize: 300.0,
            child: Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Drag Me!',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

  • PanelContainer: 这是 panely 的核心容器，所有的面板都需要放在这个容器内。
  • Panel: 代表一个可拖拽的面板。
    • controller: PanelController 用于控制面板的行为，比如打开、关闭、调整大小等。
    • initialPosition: 面板的初始位置，可以是 PanelPosition.left、PanelPosition.right、PanelPosition.top 或 PanelPosition.bottom。
    • minSize: 面板的最小尺寸。
    • maxSize: 面板的最大尺寸。
    • child: 面板的内容。

控制面板

你可以使用 PanelController 来控制面板的行为。例如，你可以通过以下代码来打开或关闭面板：

PanelController _panelController = PanelController();

void togglePanel() {
  if (_panelController.isOpen) {
    _panelController.close();
  } else {
    _panelController.open();
  }
}

自定义面板

你可以自定义面板的外观和行为。例如，你可以通过 Panel 的 decoration 属性来设置面板的背景颜色、边框等：

Panel(
  controller: _panelController,
  initialPosition: PanelPosition.right,
  minSize: 150.0,
  maxSize: 300.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        spreadRadius: 2,
      ),
    ],
  ),
  child: Center(
    child: Text(
      'Drag Me!',
      style: TextStyle(color: Colors.white, fontSize: 20),
    ),
  ),
),
回到顶部