Flutter单词收集插件word_collector的使用

Flutter单词收集插件word_collector的使用

这个包添加了一个易于使用且美观的单词收集小部件。

预览

开始使用

添加依赖

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

dependencies:
  word_collector:

导入包

在你的 Dart 文件中导入 word_collector 包:

import 'package:word_collector/word_collector.dart';

使用

第一步

准备一个包含单词的 Map<int, List<String>>

final words = <int, List<String>>{
  0: ['我们', '去', '慢跑', '每周', '星期日'],
  1: ['他们', '没有', '上学', '去年'],
  2: ['乔治', '还没有', '完成', '他的', '工作'],
  3: ['我们', '昨天', '没有', '遇到', '任何人'],
};

第二步

创建一个 WordCollectorController()

final wordCController = WordCollectorController();

第三步

创建一个 PageView

PageView.builder(
  controller: pageController,
  itemCount: words.length,
  itemBuilder: (context, index) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        WordCollector(
          controller: wordCController,
          pageIndex: index,
          words: words[index]!,
          topPanelWidth: MediaQuery.of(context).size.width * 0.9,
          bottomPanelWidth: MediaQuery.of(context).size.width * 0.9,
          wordCollectorStyle: WordCollectorStyle(),
        ),
        const SizedBox(height: 19),
        ElevatedButton(
          onPressed: () {
            setState(() {
              textResult = wordCController.getResult(pageIndex: index).toString();
            });
          },
          child: const Text('显示结果'),
        ),
        const SizedBox(height: 25),
        Text('结果: $textResult'),
      ],
    );
  },
);

结果:

原始预览

样式化

在创建 WordCollector() 后,可以通过 WordCollectorStyle() 分配样式:

WordCollector(
  controller: wordCController,
  pageIndex: index,
  words: words[index]!,
  topPanelWidth: MediaQuery.of(context).size.width * 0.9,
  bottomPanelWidth: MediaQuery.of(context).size.width * 0.9,
  wordCollectorStyle: WordCollectorStyle(
    itemBorderRadius: 22,
    paddingText: 12,
    topPanelBorderRadius: 22,
    colorFrontItem: const Color(0xFFE8D5EA),
    colorBackgroundTopPanel: const Color(0xFFCA74DA),
    colorBackItem: const Color(0xFFC8E6C9),
    textStyle: const TextStyle(
      color: Color(0xFF1C2AC4),
      fontSize: 18,
    ),
  ),
);

结果:

样式预览

获取单词结果

要获取结果,可以使用 .getResult() 方法,该方法返回 <int, Map<int, String>>

示例:

textResult = wordCController.getResult().toString();
// textResult = '{0: {0: '我们', ...}, 1: ...}'

我们还可以设置页面索引:

textResult = wordCController.getResult(pageIndex: index).toString();
// textResult = '{0: '我们', 1: '去', ...}'

更多关于Flutter单词收集插件word_collector的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter单词收集插件word_collector的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用word_collector插件的示例代码。假设word_collector插件提供了一个基本的单词收集功能,包括添加、删除和查看单词列表。请注意,由于word_collector插件的具体API和实现细节可能因版本而异,以下代码是一个假设性的示例,用于展示如何集成和使用一个类似的插件。

首先,确保在pubspec.yaml文件中添加word_collector插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  word_collector: ^x.y.z  # 替换为实际的版本号

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

接下来,创建一个Flutter应用,并在其中使用word_collector插件。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:word_collector/word_collector.dart'; // 假设插件的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Word Collector Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WordCollectorScreen(),
    );
  }
}

class WordCollectorScreen extends StatefulWidget {
  @override
  _WordCollectorScreenState createState() => _WordCollectorScreenState();
}

class _WordCollectorScreenState extends State<WordCollectorScreen> {
  final WordCollector _wordCollector = WordCollector();
  List<String> _words = [];
  TextEditingController _wordController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // 假设插件有一个方法来获取初始单词列表
    _wordCollector.getWords().then((words) {
      setState(() {
        _words = words;
      });
    });
  }

  void _addWord() {
    String word = _wordController.text.trim();
    if (word.isNotEmpty) {
      _wordCollector.addWord(word).then((_) {
        setState(() {
          _words.add(word);
          _wordController.clear();
        });
      });
    }
  }

  void _deleteWord(String word) {
    _wordCollector.deleteWord(word).then((_) {
      setState(() {
        _words.remove(word);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Word Collector'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _wordController,
              decoration: InputDecoration(
                labelText: 'Enter a word',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _addWord,
              child: Text('Add Word'),
            ),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: _words.length,
                itemBuilder: (context, index) {
                  String word = _words[index];
                  return ListTile(
                    title: Text(word),
                    trailing: IconButton(
                      icon: Icon(Icons.delete),
                      onPressed: () => _deleteWord(word),
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们做了以下几件事:

  1. pubspec.yaml文件中添加了word_collector插件的依赖。
  2. 创建了一个Flutter应用,并在其中使用word_collector插件来管理单词列表。
  3. 使用WordCollector类(假设这是插件提供的核心类)来添加、删除和获取单词列表。
  4. 创建了一个简单的用户界面,允许用户输入单词并将其添加到列表中,以及从列表中删除单词。

请注意,由于word_collector插件的实际API可能与上述假设有所不同,因此在实际使用时,请查阅插件的官方文档以获取正确的使用方法和API参考。

回到顶部