Flutter可拖拽分割插件snappable的使用

snappable 是一个在 Flutter 中实现类似灭霸效果的库。你可以通过它轻松实现可拖拽分割的功能。更多关于该插件的信息可以查看 Fidev 博客文章。

示例效果

以下是 snappable 的一些示例效果：

使用步骤

1. 导入插件

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

dependencies:
  snappable: ^x.x.x

然后运行以下命令以安装依赖：

flutter pub get

接下来，在你的 Dart 文件中导入插件：

import 'package:snappable/snappable.dart';

2. 包裹任意 Widget

使用 Snappable 将任何 Widget 包裹起来，使其具有可拖拽分割的功能。

[@override](/user/override)
Widget build(BuildContext context) {
  return Snappable(
    child: Text('This will be snapped'),
  );
}

3. 使用 Key 控制拖拽

你还可以通过 GlobalKey 来手动控制拖拽和重置。

示例代码

class MyWidget extends StatelessWidget {
  final key = GlobalKey<SnappableState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Snappable(
      key: key,
      child: Text('This will be snapped'),
    );
  }

  // 手动触发拖拽
  void snap() {
    key.currentState.snap();
  }

  // 手动重置
  void reset() {
    key.currentState.reset();
  }
}

4. 点击触发拖拽

如果你希望点击 Widget 即可触发拖拽，可以设置 snapOnTap 属性为 true。

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Snappable(
      snapOnTap: true,
      child: Text('This will be snapped'),
    );
  }
}

点击一次触发拖拽，再次点击则重置。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 snappable 插件。

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

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(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final _snappableKey = GlobalKey<SnappableState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Snap Example'),
      ),
      body: Column(
        children: <Widget>[
          // 使用 Snappable 包裹的 Widget
          Snappable(
            key: _snappableKey,
            snapOnTap: true, // 点击即可触发拖拽
            child: Card(
              child: Container(
                height: 300,
                width: double.infinity,
                color: Colors.deepPurple,
                alignment: Alignment.center,
                child: Text(
                  'This will be snapped',
                  style: Theme.of(context).textTheme.title.copyWith(
                        color: Colors.white,
                      ),
                ),
              ),
            ),
          ),
          // 按钮用于手动触发拖拽或重置
          RaisedButton(
            child: Text('Snap / Reverse'),
            onPressed: () {
              SnappableState state = _snappableKey.currentState;
              if (state.isGone) {
                state.reset(); // 如果已经拖拽出去，则重置
              } else {
                state.snap(); // 否则触发拖拽
              }
            },
          )
        ],
      ),
    );
  }
}