Flutter拖拽功能插件flutter_draggable_widget的使用

Flutter拖拽功能插件flutter_draggable_widget的使用

一个帮助你创建可以在屏幕上拖动的小部件的 Flutter 包。

Demo

特性 💚

• 手动控制小部件的位置。
• 小部件大小自动调整。
• 高度可定制。
• 支持 Flutter Web。

属性 🔖

/// 将要作为拖动小部件显示的 widget
final Widget child;

/// 小部件周围的水平填充
final double horizontalSpace;

/// 小部件周围的垂直填充
final double verticalSpace;

/// 小部件的初始位置，默认为 [AnchoringPosition.bottomRight]
final AnchoringPosition initialPosition;

/// 初始是否可见，默认为 [true]
final bool intialVisibility;

/// 创建小部件底部边界的顶部底部填充，例如如果你有一个 [BottomNavigationBar]，则可能需要设置底部边界，以便可拖动按钮不能覆盖 [BottomNavigationBar]
final double bottomMargin;

/// 创建小部件顶部边界的顶部底部填充，例如如果你有一个 [AppBar]，则可能需要设置顶部边界，以便可拖动按钮不能覆盖 [AppBar]
final double topMargin;

/// 状态栏的高度，默认为 24
final double statusBarHeight;

/// 可拖动小部件的阴影圆角半径，默认为 10
final double shadowBorderRadius;

/// 用于显示/隐藏或移动小部件到屏幕上的控制器
final DragController? dragController;

/// 小部件未被拖动时的阴影，默认为
/// ```dart
/// const BoxShadow(
///     color: Colors.black38,
///    offset: Offset(0, 4),
///    blurRadius: 2,
///  ),
/// ```

final BoxShadow normalShadow;

/// 小部件被拖动时的阴影
/// ```dart
/// const BoxShadow(
///     color: Colors.black38,
///    offset: Offset(0, 10),
///    blurRadius: 10,
///  ),
/// ```
final BoxShadow draggingShadow;

/// 当 [FlutterDraggableWidget] 被拖动时，应该缩放多少，默认为 1.1
final double dragAnimationScale;

AnchoringPosition 可以是以下四种类型之一

enum AnchoringPosition {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
  center
}

如何使用

Stack(
  children: [
    // 其他小部件...
    FlutterDraggableWidget(
      bottomMargin: 80,
      topMargin: 80,
      intialVisibility: true,
      horizontalSpace: 20,
      shadowBorderRadius: 50,
      child: Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.blue,
        ),
      ),
      initialPosition: AnchoringPosition.bottomLeft,
      dragController: dragController,
    ),
  ],
)

DragController 功能

/// 程序化跳转到任何 [AnchoringPosition]
void jumpTo(AnchoringPosition anchoringPosition)

/// 获取当前屏幕 [Offset?] 上的小部件位置
Offset? getCurrentPosition()

/// 使小部件可见
void showWidget()

/// 隐藏小部件
void hideWidget()

运行示例文件夹中的示例应用程序，以了解更多如何使用它。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final dragController = DragController();

  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: () {
                    dragController.showWidget();
                  },
                  child: const Text("显示"),
                ),
                TextButton(
                  onPressed: () {
                    dragController.hideWidget();
                  },
                  child: const Text("隐藏"),
                ),
                TextButton(
                  onPressed: () {
                    dragController.jumpTo(AnchoringPosition.topRight);
                  },
                  child: const Text("移动到右上角"),
                ),
                TextButton(
                  onPressed: () {
                    dragController.jumpTo(AnchoringPosition.topLeft);
                  },
                  child: const Text("移动到左上角"),
                ),
                TextButton(
                  onPressed: () {
                    dragController.jumpTo(AnchoringPosition.bottomRight);
                  },
                  child: const Text("移动到底右角"),
                ),
                TextButton(
                  onPressed: () {
                    dragController.jumpTo(AnchoringPosition.bottomLeft);
                  },
                  child: const Text("移动到底左角"),
                ),
                TextButton(
                  onPressed: () {
                    dragController.jumpTo(AnchoringPosition.center);
                  },
                  child: const Text("移动到中心"),
                ),
              ],
            ),
          ),
          Container(
            height: 80,
            width: double.infinity,
            color: Colors.green,
          ),
          FlutterDraggableWidget(
            bottomMargin: 80,
            topMargin: 80,
            intialVisibility: true,
            horizontalSpace: 20,
            shadowBorderRadius: 50,
            initialPosition: AnchoringPosition.bottomLeft,
            dragController: dragController,
            child: Container(
              height: 100,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Stack(
                children: [
                  IconButton(icon: Icon(Icons.close), onPressed: () {})
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}