Flutter浮动菜单面板插件floating_menu_panel的使用

Flutter浮动菜单面板插件floating_menu_panel的使用

介绍

floating_menu_panel 是一个Flutter插件，用于在应用中创建浮动的菜单面板。该面板可以包含多个图标按钮，并且可以通过点击展开或收起。以下是关于如何使用 floating_menu_panel 插件的详细介绍和示例代码。

基本用法

要使用 floating_menu_panel，首先需要导入插件，然后将其添加到 Stack 小部件的子部件列表中。你可以通过 buttons 属性来指定面板中的图标按钮。

import 'package:floating_menu_panel/floating_menu_panel.dart'; // 导入Floating Menu Panel

return MaterialApp(
  home: Scaffold(
    body: Stack(
      children: [
        FloatingMenuPanel(
          onPressed: (index) {
            print('SELECT__: $index'); // 当点击某个按钮时，打印索引
          },
          buttons: [
            Icons.star_border_outlined, // 图标1
            Icons.add_comment,           // 图标2
            Icons.music_note             // 图标3
          ],
        ),
      ],
    ),
  ),
);

完整示例

下面是一个完整的示例，展示了如何将 floating_menu_panel 集成到一个简单的Flutter应用中。这个示例包括了基本的页面结构、主题设置以及浮动菜单面板的配置。

import 'package:flutter/material.dart';
import 'package:floating_menu_panel/floating_menu_panel.dart'; // 导入Floating Menu Panel

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, // 应用的主题颜色
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      // 添加浮动菜单面板
      body: Stack(
        children: [
          // 其他页面内容
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          // 浮动菜单面板
          FloatingMenuPanel(
            onPressed: (index) {
              print('Clicked on item: $index'); // 当点击某个按钮时，打印索引
            },
            buttons: [
              Icons.message,         // 消息图标
              Icons.photo_camera,    // 相机图标
              Icons.video_library    // 视频库图标
            ],
            positionTop: 0.0,        // 初始顶部位置
            positionLeft: 0.0,       // 初始左侧位置
            backgroundColor: Color(0xFFEDEDED), // 面板背景颜色
            contentColor: Colors.black,         // 图标颜色
            panelShape: PanelShape.rectangle,   // 面板形状（矩形）
            borderRadius: BorderRadius.circular(8.0), // 面板圆角
            dockType: DockType.inside,          // 面板停靠类型（内部）
            dockOffset: 5.0,                    // 面板停靠偏移量
            panelAnimDuration: 300,             // 面板打开/关闭动画时长
            panelAnimCurve: Curves.easeOut,     // 面板打开/关闭动画曲线
            dockAnimDuration: 300,              // 自动停靠动画时长
            dockAnimCurve: Curves.easeOut,      // 自动停靠动画曲线
            panelOpenOffset: 20.0,              // 面板打开时的偏移量
            panelIcon: Icons.menu,              // 面板开关图标
            size: 70.0,                         // 单个按钮的大小
            iconSize: 24.0,                     // 图标的大小
            borderWidth: 1.0,                   // 面板边框宽度
            borderColor: Colors.black,          // 面板边框颜色
          ),
        ],
      ),
    );
  }
}