Flutter可拖拽面板插件draggable_panel的使用

一个多功能且可定制的可拖拽面板 🚀

可拖拽面板（DraggablePanel）是一个用于Flutter的多功能且交互式的组件，可以创建浮动、可拖动的面板，这些面板可以停靠在屏幕最近的边缘。该面板非常适合用于显示额外的内容、操作或工具，这些内容、操作或工具可以根据需求访问。

您的反馈非常重要，因为它将帮助塑造未来的更新并确保包保持相关性和有用性。😊

展示一些❤️并支持该项目！您可以点击下方链接来为项目添加星星。

📜 展示

📌 开始使用

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  draggable_panel: ^1.0.2

导入包

在需要使用的Dart文件中导入以下包：

import 'package:draggable_panel/draggable_panel.dart';

使用方法

简单地将DraggablePanel添加到MaterialApp的builder中。

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

void main() {
  runApp(
    const App(),
  );
}

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

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  bool isEnabled = true;
  final DraggablePanelController controller = DraggablePanelController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    isEnabled = !isEnabled;
                  });
                },
                child: const Text('Tap'),
              ),
            ],
          ),
        ),
      ),
      builder: (context, child) {
        return Visibility(
          visible: isEnabled,
          replacement: child!,
          child: DraggablePanel(
            items: [
              (
                enableBadge: false,
                icon: Icons.list,
                onTap: (context) {},
              ),
              (
                enableBadge: false,
                icon: Icons.color_lens,
                onTap: (context) {},
              ),
              (
                enableBadge: false,
                icon: Icons.zoom_in,
                onTap: (context) {},
              ),
              (
                enableBadge: false,
                icon: Icons.token,
                onTap: (context) {},
              ),
              (
                enableBadge: false,
                icon: Icons.list,
                onTap: (context) {},
              ),
              (
                enableBadge: false,
                icon: Icons.list,
                onTap: (context) {},
              ),
            ],
            buttons: [
              (
                icon: Icons.copy,
                onTap: (context) {
                  // 隐藏面板
                  controller.toggle(context);
                },
                label: 'Push token',
              ),
            ],
            controller: controller,
            child: child,
          ),
        );
      },
    );
  }
}