Flutter可拖拽按钮面板插件draggable_button_panel的使用

描述

DraggableButtonPanel 是一个可以展示一个带有按钮的面板的部件。当点击按钮时，会触发一个动画，显示包含选项列表的侧边栏。

面板最初是关闭状态，并且具有较低的透明度。当按钮被点击时，面板会以淡入动画形式打开。面板的位置根据按钮在屏幕上的初始位置来决定，可以在左边或右边显示。

面板包含一组用户自定义的图标选项，这些图标水平排列在面板内。当选择某个选项时，可以触发相应的动作。

面板和按钮在颜色、大小和透明度方面都是可定制的。可以通过 options、buttonSize、panelColor、buttonColor 和 collapseOpacity 等属性来自定义 DraggableButtonPanel 的外观和行为。

DraggableButtonPanel 使用了 Flutter 中的一些特性，如 StatefulWidget、AnimationController、AnimatedOpacity、Stack 和 Positioned 来管理面板的状态、执行动画并正确地排列屏幕上的元素。

总结来说，DraggableButtonPanel 是一个方便的部件，用于在 Flutter 应用程序中显示可拖动的按钮和选项面板。

短演示

安装

要使用这个包，你需要在你的 pubspec.yaml 文件中添加 draggable_button_panel 作为依赖项。你可以从 pub.dev 下载它。

1. 打开你的 Flutter 项目的 pubspec.yaml 文件。
2. 在 dependencies 部分下添加以下行：

   draggable_button_panel: ^1.0.1-dev.1
   

3. 在终端运行以下命令：

   flutter pub get
   

4. 通过在 Dart 文件中添加以下导入语句来引入该包：

   import 'package:draggable_button_panel/draggable_button_panel.dart';
   

使用

使用 DraggableButtonPanel 只需简单地导入并将其用于你的部件。你可以自定义按钮、颜色、大小和面板的位置。

在使用 DraggableButtonPanel 时，建议使用 GlobalKey 来保持部件的位置，即使父部件重建也是如此。

你还可以获取 currentState 的 top 位置，以便根据应用程序的需求更新面板的位置。

以下是一个示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<DraggableButtonPanelState> _draggableButtonPanelKey =
      GlobalKey<DraggableButtonPanelState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Draggable Button Panel Example')),
      body: Center(
        child: DraggableButtonPanel(
          key: _draggableButtonPanelKey,
          children: [
            IconButton(
              icon: Icon(Icons.favorite),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.access_alarm),
              onPressed: () {},
            ),
          ],
          top: _draggableButtonPanelKey.currentState?.top ?? 50,
          left: 10,
          buttonSize: 55,
          panelColor: Colors.white,
          buttonColor: Colors.blue,
          collapseOpacity: 0.8,
        ),
      ),
    );
  }
}