Flutter拖拽匹配插件drag_drop_match_widget的使用

Flutter 拖拽匹配插件 drag_drop_match_widget 的使用

功能

此插件用于简化创建拖拽匹配界面的过程。它适用于游戏和其他交互式应用。

开始使用

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

dependencies:
  drag_drop_match_widget: ^版本号

然后运行 flutter pub get 来获取依赖包。

使用方法

定义数据项

首先定义一个包含 DragDropItem 的列表，每个 DragDropItem 都有相应的拖拽元素和放置元素。

final items = [
  DragDropItem(
      key: "apple",
      value: "apple",
      dragChild: Text(
        "APPLE",
        style: TextStyle(fontSize: 30),
      ),
      dropChild: Text(
        "🍎",
        style: TextStyle(fontSize: 50),
      ),
      iconData: Icons.one_k),
  DragDropItem(
      key: "ball",
      value: "Ball",
      dragChild: Text(
        "BALL",
        style: TextStyle(fontSize: 30),
      ),
      dropChild: Text(
        "⚽",
        style: TextStyle(fontSize: 50),
      ),
      iconData: Icons.one_k),
  DragDropItem(
      key: "cat",
      value: "Cat",
      dragChild: Text(
        "CAT",
        style: TextStyle(fontSize: 30),
      ),
      dropChild: Text(
        "😺",
        style: TextStyle(fontSize: 50),
      ),
      iconData: Icons.one_k)
];

创建拖拽匹配界面

使用 DragDropWidget 组件，并传入上述定义的数据项。还可以定义匹配和不匹配时的回调函数。

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<DragDropItem> items = [];
  int score = 0;
  var matched = [];

  [@override](/user/override)
  void initState() {
    items_2.shuffle();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Matching Game',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("Score $score"),
          ),
          body: Container(
            child: DragDropWidget(
                items: items_2,
                onMatched: (DragDropItem? item) {
                  score += 10;
                  setState(() {});
                  matched.add(item);
                  if (matched.length == items_2.length) {
                    print("GAME OVER");
                  }
                },
                onMisMatched: (DragDropItem? item) {
                  print("Mismatched");
                  print(item);
                }),
          ),
        ));
  }
}

更多信息

更多关于该插件的信息可以在 GitHub 上找到。

完整示例代码

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

var map = {
  'APPLE': '🍎',
  'BALL': '⚽',
  'CAT': '😺',
  'DOG': '🐶',
  'ELEPHANT': '🐘',
  'FOX': '🦊',
  'FISH': '🐟',
};

var items_2 = [
  DragDropItem(
      key: "apple",
      value: "apple",
      dragChild: Text(
        "APPLE",
        style: TextStyle(fontSize: 30),
      ),
      dropChild: Text(
        "🍎",
        style: TextStyle(fontSize: 50),
      ),
      iconData: Icons.one_k),
  DragDropItem(
      key: "ball",
      value: "Ball",
      dragChild: Text(
        "BALL",
        style: TextStyle(fontSize: 30),
      ),
      dropChild: Text(
        "⚽",
        style: TextStyle(fontSize: 50),
      ),
      iconData: Icons.one_k),
  DragDropItem(
      key: "cat",
      value: "Cat",
      dragChild: Text(
        "CAT",
        style: TextStyle(fontSize: 30),
      ),
      dropChild: Text(
        "😺",
        style: TextStyle(fontSize: 50),
      ),
      iconData: Icons.one_k)
];

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<DragDropItem> items = [];
  int score = 0;
  var matched = [];

  [@override](/user/override)
  void initState() {
    items_2.shuffle();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Matching Game',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text("Score $score"),
          ),
          body: Container(
            child: DragDropWidget(
                items: items_2,
                onMatched: (DragDropItem? item) {
                  score += 10;
                  setState(() {});
                  matched.add(item);
                  if (matched.length == items_2.length) {
                    print("GAME OVER");
                  }
                },
                onMisMatched: (DragDropItem? item) {
                  print("Mismatched");
                  print(item);
                }),
          ),
        ));
  }
}

更多关于Flutter拖拽匹配插件drag_drop_match_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter拖拽匹配插件drag_drop_match_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


drag_drop_match_widget 是一个 Flutter 插件，用于实现拖拽匹配的功能。它允许用户将可拖拽的元素拖放到目标区域，并根据匹配规则进行验证。这个插件非常适合用于教育类应用、游戏、或者任何需要用户进行拖拽匹配的场景。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  drag_drop_match_widget: ^latest_version

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示如何使用 drag_drop_match_widget 插件来实现拖拽匹配功能。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DragDropMatchExample(),
    );
  }
}

class DragDropMatchExample extends StatefulWidget {
  @override
  _DragDropMatchExampleState createState() => _DragDropMatchExampleState();
}

class _DragDropMatchExampleState extends State<DragDropMatchExample> {
  List<String> words = ["Apple", "Banana", "Cherry", "Date"];
  List<String> matchedWords = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag and Drop Match Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: DragDropMatchWidget(
              words: words,
              onMatch: (word) {
                setState(() {
                  matchedWords.add(word);
                });
              },
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: matchedWords.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(matchedWords[index]),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

代码解释

  1. DragDropMatchWidget: 这是插件的核心组件，它负责显示可拖拽的单词和匹配区域。words 参数是一个字符串列表，表示可拖拽的单词。

  2. onMatch 回调: 当用户将一个单词拖放到匹配区域时，onMatch 回调会被触发。你可以在这个回调中处理匹配逻辑，例如将匹配的单词添加到 matchedWords 列表中。

  3. matchedWords: 这是一个用于存储已匹配单词的列表。每当一个单词被匹配时，它会被添加到这个列表中，并显示在 ListView 中。

自定义

你可以根据需要自定义 DragDropMatchWidget 的外观和行为。例如，你可以通过设置 dragChildBuilder 和 dropChildBuilder 来自定义拖拽元素和目标区域的外观。

DragDropMatchWidget(
  words: words,
  onMatch: (word) {
    setState(() {
      matchedWords.add(word);
    });
  },
  dragChildBuilder: (context, word) {
    return Container(
      padding: EdgeInsets.all(8),
      color: Colors.blue,
      child: Text(
        word,
        style: TextStyle(color: Colors.white),
      ),
    );
  },
  dropChildBuilder: (context) {
    return Container(
      padding: EdgeInsets.all(8),
      color: Colors.grey[300],
      child: Center(
        child: Text('Drop here'),
      ),
    );
  },
)
回到顶部