Flutter标签编辑插件super_tag_editor的使用

Super Tag Editor

Super Tag Editor 是一个用于Flutter应用中简单输入标签的小部件。它具有如下增强功能：

• 建议框：在用户输入时提供可能的选项。
• 验证：确保输入的内容符合预期。

使用方法

添加依赖

首先，在pubspec.yaml文件中添加super_tag_editor包：

dependencies:
  super_tag_editor: ^latest_version # 替换为最新版本号

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

导入包

在需要使用的Dart文件中导入super_tag_editor：

import 'package:super_tag_editor/tag_editor.dart';

使用组件

下面是一个完整的示例，展示了如何在项目中使用TagEditor小部件。这个例子创建了一个可以添加、删除和从建议列表选择标签的文本框。

import 'package:flutter/material.dart';
import 'package:super_tag_editor/tag_editor.dart';

void main() => runApp(MyApp());

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const mockResults = [
    'dat@gmail.com',
    'dab246@gmail.com',
    // 更多模拟数据...
  ];

  List<String> _values = [];
  final FocusNode _focusNode = FocusNode();
  final TextEditingController _textEditingController = TextEditingController();

  void _onDelete(int index) {
    setState(() {
      _values.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ''),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            TagEditor<String>(
              length: _values.length,
              controller: _textEditingController,
              focusNode: _focusNode,
              delimiters: [',', ' '],
              hasAddButton: true,
              resetTextOnSubmitted: true,
              inputDecoration: const InputDecoration(
                border: InputBorder.none,
                hintText: '请输入标签...',
              ),
              onTagChanged: (newValue) {
                setState(() {
                  _values.add(newValue);
                });
              },
              tagBuilder: (context, index) => _Chip(
                index: index,
                label: _values[index],
                onDeleted: _onDelete,
              ),
              findSuggestions: (String query) {
                if (query.isNotEmpty) {
                  var lowercaseQuery = query.toLowerCase();
                  return mockResults.where((profile) =>
                          profile.toLowerCase().contains(lowercaseQuery))
                      .toList(growable: false)
                        ..sort((a, b) => a
                            .toLowerCase()
                            .indexOf(lowercaseQuery)
                            .compareTo(b.toLowerCase().indexOf(lowercaseQuery)));
                }
                return [];
              },
              suggestionBuilder: (context, state, data) => ListTile(
                key: ObjectKey(data),
                title: Text(data),
                onTap: () {
                  state.selectSuggestion(data);
                },
              ),
              suggestionsBoxElevation: 10,
            ),
            const Divider(),
            ElevatedButton(
              onPressed: () {},
              child: const Text('示例按钮'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _focusNode.dispose();
    _textEditingController.dispose();
    super.dispose();
  }
}

class _Chip extends StatelessWidget {
  const _Chip({
    required this.label,
    required this.onDeleted,
    required this.index,
  });

  final String label;
  final ValueChanged<int> onDeleted;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Chip(
      labelPadding: const EdgeInsets.only(left: 8.0),
      label: Text(label),
      deleteIcon: const Icon(
        Icons.close,
        size: 18,
      ),
      onDeleted: () {
        onDeleted(index);
      },
    );
  }
}

此代码片段演示了如何配置和使用TagEditor小部件，包括设置分隔符、启用添加按钮、自定义输入提示以及定义标签样式等。此外，还展示了如何通过findSuggestions方法提供自动完成建议，并通过suggestionBuilder构建每个建议项的UI。