Flutter多标签选择器插件multi_tag_picker的使用

Flutter多标签选择器插件multi_tag_picker的使用

简介

multi_tag_picker 是一个结合了 flutter_typeahead 的文本字段与芯片（chip）行的 Flutter 库。它允许用户从建议列表中选择标签，并且可以创建新值。这与 choose_input_chips 类似，但此小部件提供了创建新值的功能。

安装

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

dependencies:
  multi_tag_picker: ^1.0.0

然后运行以下命令以获取依赖项：

flutter pub get

导入

在需要使用的地方导入该库：

import 'package:multi_tag_picker/multi_tag_picker.dart';

示例代码

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

示例代码

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_syntax_view/flutter_syntax_view.dart';
import 'package:multi_tag_picker/multi_tag_picker.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 const MaterialApp(
      title: 'MultiPicker Demo',
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedValuesJson = '尚未找到任何标签...';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MultiPicker 示例'),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: MultiTagPicker(
              textFieldConfiguration: const TextFieldConfiguration(
                decoration: InputDecoration(
                  border: InputBorder.none,
                  filled: true,
                  hintText: '输入查询',
                  labelText: '选择标签',
                ),
              ),
              findSuggestions: getLanguages,
              additionCallback: (value) {
                return Language(
                  name: value,
                  position: 0,
                );
              },
              configureSuggestion: (lang) {
                return SuggestionConfiguration(
                  title: Text(lang.name),
                  subtitle: Text(lang.position.toString()),
                  additionWidget: const Chip(
                    avatar: Icon(
                      Icons.add_circle,
                    ),
                    label: Text('添加新标签'),
                  ),
                );
              },
              placeholderItem: const Language(
                name: '占位符',
                position: 0,
              ),
              configureChip: (lang) {
                return ChipConfiguration(
                  label: Text(lang.name),
                );
              },
              onChanged: (values) {
                setState(() {
                  if (values.isEmpty) {
                    _selectedValuesJson = '已移除所有标签...';
                  } else {
                    _selectedValuesJson = values
                        .map<String>((lang) => '\n${lang.toJson()}')
                        .toList()
                        .toString()
                        .replaceFirst('}]', '}\n]');
                  }
                });
              },
            ),
          ),
          const Text(
            '已选择的标签',
            style: TextStyle(fontSize: 18.0),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 1.0),
                ),
                child: SyntaxView(
                  code: _selectedValuesJson,
                  syntax: Syntax.JAVASCRIPT,
                  fontSize: 16.0,
                  expanded: true,
                  withLinesCount: false,
                  syntaxTheme: SyntaxTheme.standard(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

/// 模拟从网络API获取语言数据，延迟500毫秒。
Future<List<Language>> getLanguages(String query) async {
  if (query.isEmpty) {
    return const [];
  }
  await Future.delayed(const Duration(milliseconds: 500), null);
  final lowercaseQuery = query.toLowerCase();
  return const [
    Language(name: 'Rust', position: 1),
    Language(name: 'Dart', position: 2),
    Language(name: 'Scheme', position: 3),
    Language(name: 'Swift', position: 4),
    Language(name: 'Erlang', position: 5),
    Language(name: 'Go', position: 6),
    Language(name: 'F#', position: 7),
    Language(name: 'Java', position: 8),
    Language(name: 'C#', position: 9),
    Language(name: 'JavaScript', position: 10),
    Language(name: 'APL', position: 11),
    Language(name: 'Python', position: 12),
    Language(name: 'Haxe', position: 13),
    Language(name: 'Io', position: 14),
    Language(name: 'Lua', position: 15),
    Language(name: 'OCaml', position: 16),
    Language(name: 'C++', position: 17),
    Language(name: 'Prolog', position: 18),
    Language(name: 'TypeScript', position: 19),
    Language(name: 'Zig', position: 20),
  ]
      .where((lang) => lang.name.toLowerCase().contains(lowercaseQuery))
      .toList(growable: false)
    ..sort((a, b) =>
        a.name.toLowerCase().indexOf(lowercaseQuery).compareTo(
            b.name.toLowerCase().indexOf(lowercaseQuery)));
}

/// Language 表示一种编程语言。
///
/// 此类重写了 `==` 运算符和 `hashCode` 方法，以便与其他相同类型的值进行合理的比较。
class Language {
  final String name;
  final int position;

  const Language({
    required this.name,
    required this.position,
  });

  [@override](/user/override)
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is Language &&
          runtimeType == other.runtimeType &&
          name == other.name;

  [@override](/user/override)
  int get hashCode => name.hashCode;

  [@override](/user/override)
  String toString() {
    return name;
  }

  String toJson() => '''
  {
    "name": $name,
    "position": $position
  }''';
}