Flutter标签输入插件textfield_tags的使用

textfield_tags 是一个Flutter插件，允许开发者在文本字段中创建标签。该插件带有两个默认控制器，可以让你存储标签为普通字符串或对象。你也可以通过扩展基类控制器来自定义标签控制器。

环境要求

• SDK: >=2.12.0 <4.0.0
• Flutter: >=1.17.0

安装

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

dependencies:
  textfield_tags: ^3.0.1

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

$ flutter pub get

使用方法

导入包

首先，在你的Dart文件中导入textfield_tags包：

import 'package:textfield_tags/textfield_tags.dart';

创建TextFieldTags Widget

接下来，调用TextFieldTags(...)来创建标签输入框。这个组件接收9个参数：

• List<String>? initialTags: 初始标签列表。
• ScrollController? scrollController: 滚动控制器。
• FocusNode? focusNode: 输入框焦点节点。
• TextEditingController? textEditingController: 文本编辑控制器。
• List<String>? textSeparators: 分隔符列表，用于分割标签。
• LetterCase? letterCase: 标签字母大小写设置。
• Validator? validator: 验证函数。
• InputFieldBuilder inputfieldBuilder: 自定义输入框构造器。
• TextfieldTagsController? textfieldController: 标签控制器。

下面是一些具体的使用示例。

示例代码

字符串标签（StringTagController）

如果你只需要处理基于字符串的标签，那么可以使用StringTagController。下面是一个完整的例子：

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

class MyWidget extends StatelessWidget {
  final _stringTagController = StringTagController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('String Tags Example')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFieldTags<String>(
          textfieldTagsController: _stringTagController,
          initialTags: ['python', 'java'],
          textSeparators: const [' ', ','],
          validator: (String tag) {
            if (tag == 'php') {
              return 'Php not allowed';
            }
            return null;
          },
          inputFieldBuilder: (context, inputFieldValues) {
            return TextField(
              controller: inputFieldValues.textEditingController,
              focusNode: inputFieldValues.focusNode,
            );
          },
        ),
      ),
    );
  }
}

动态类型标签（DynamicTagController）

如果你想存储动态数据类型的标签，例如包含颜色和表情符号的对象，你可以使用DynamicTagController。这里有一个完整示例：

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

// Sample data model 
class ButtonData {
  final Color buttonColor;
  final String emoji;
  const ButtonData(this.buttonColor, this.emoji);
}

class MyWidget extends StatelessWidget {
  final _dynamicTagController = DynamicTagController<DynamicTagData<ButtonData>>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dynamic Tags Example')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFieldTags<DynamicTagData<ButtonData>>(
          textfieldTagsController: _dynamicTagController,
          initialTags: [
            DynamicTagData<ButtonData>(
              'cat',
              ButtonData(Color.fromARGB(255, 132, 204, 255), "😽"),
            ),
            DynamicTagData<ButtonData>(
              'penguin',
              ButtonData(Color.fromARGB(255, 255, 131, 228), '🐧'),
            ),
            DynamicTagData<ButtonData>(
              'tiger',
              ButtonData(Color.fromARGB(255, 222, 255, 132), '🐯'),
            ),
          ],
          textSeparators: const [' ', ','],
          validator: (DynamicTagData<ButtonData> tag) {
            if (tag.tag == 'lion') {
              return 'Not invited per tiger request';
            } else if (_dynamicTagController.getTags!
                .any((element) => element.tag == tag.tag)) {
              return 'Already in the club';
            }
            return null;
          },
          inputFieldBuilder: (context, inputFieldValues) {
            return TextField(
              controller: inputFieldValues.textEditingController,
              focusNode: inputFieldValues.focusNode,
            );
          },
        ),
      ),
    );
  }
}

自定义控制器

对于更高级的功能需求，可以通过继承TextfieldTagsController类来创建自定义控制器。这里展示了一个简单的例子，它实现了一个数字标签选择器，允许用户从2到10之间选择数字（但不允许选择8）：

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

// Create my own custom controller
class MyIntTagController<T extends int> extends TextfieldTagsController<T> {
  @override
  bool? onTagSubmitted(T value) {
    String? validate = getValidator != null ? getValidator!(value) : null;
    if (validate == null && value > 2 && value < 10) {
      bool? addTag = super.addTag(value);
      if (addTag == true) {
        setError = null;
        scrollTags();
      }
    } else if (validate != null) {
      setError = validate;
    } else {
      setError = 'Must enter numbers between 2 and 10';
    }
    return null;
  }

  @override
  set setError(String? error) {
    super.setError = error;
    notifyListeners();
  }

  doOtherThings() {
    // Additional logic here
  }
}

class MyWidget extends StatelessWidget {
  final _myintTagController = MyIntTagController<int>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Tags Example')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextFieldTags<int>(
          textfieldTagsController: _myintTagController,
          initialTags: [4, 5],
          validator: (int tag) {
            if (tag == 8) {
              return '8 is not allowed';
            }
            return null;
          },
          inputFieldBuilder: (context, inputFieldValues) {
            return TextField(
              controller: inputFieldValues.textEditingController,
              focusNode: inputFieldValues.focusNode,
            );
          },
        ),
      ),
    );
  }
}

以上就是textfield_tags插件的基本用法以及一些常见场景下的应用实例。希望这些信息能帮助你在项目中更好地利用这个强大的工具！