Flutter标签输入插件chips_input的使用

Flutter标签输入插件chips_input的使用

chips_input 是一个用于构建具有输入选项的输入字段的 Flutter 库。它允许用户通过选择标签或输入文本来添加数据。

版本信息

• Pub版本:
• GitHub工作流状态:

使用方法

导入

首先，需要导入 chips_input 包：

import 'package:chips_input/chips_input.dart';

示例

以下是一个完整的示例，展示了如何使用 chips_input 插件：

1. 首先创建一个类来存储数据。这里我们使用了一个简单的 AppProfile 类：

class AppProfile {
  final String name;
  final String email;
  final String imageUrl;

  const AppProfile(this.name, this.email, this.imageUrl);

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is AppProfile &&
          runtimeType == other.runtimeType &&
          name == other.name;

  @override
  int get hashCode => name.hashCode;

  @override
  String toString() {
    return name;
  }
}

1. 初始化一些数据并实现 ChipsInput 组件：

const mockResults = [
    AppProfile('John Doe', 'jdoe@flutter.io',
        'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg'),
    AppProfile('Paul', 'paul@google.com',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Fred', 'fred@google.com',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Brian', 'brian@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('John', 'john@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Thomas', 'thomas@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Nelly', 'nelly@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Marie', 'marie@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Charlie', 'charlie@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Diana', 'diana@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Ernie', 'ernie@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
    AppProfile('Gina', 'fred@flutter.io',
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png'),
];

// 实现ChipsInput组件
ChipsInput(
  maxChips: 3, // 最多可以输入3个标签
  initialValue: [mockResults[1]], // 初始值为mockResults的第一个元素
  findSuggestions: (String query) {
    if (query.isNotEmpty) {
      var lowercaseQuery = query.toLowerCase();
      final results = mockResults.where((profile) {
        return profile.name
                .toLowerCase()
                .contains(query.toLowerCase()) ||
            profile.email
                .toLowerCase()
                .contains(query.toLowerCase());
      }).toList(growable: false)
        ..sort((a, b) => a.name
            .toLowerCase()
            .indexOf(lowercaseQuery)
            .compareTo(
                b.name.toLowerCase().indexOf(lowercaseQuery)));
      return results;
    }
    return mockResults;
  },
  onChanged: (data) {
    print(data); // 打印选中的标签
  },
  chipBuilder: (context, state, AppProfile profile) {
    return InputChip(
      key: ObjectKey(profile),
      label: Text(profile.name),
      avatar: CircleAvatar(
        backgroundImage: NetworkImage(profile.imageUrl),
      ),
      onDeleted: () => state.deleteChip(profile),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    );
  },
  suggestionBuilder: (context, AppProfile profile) {
    return ListTile(
      key: ObjectKey(profile),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(profile.imageUrl),
      ),
      title: Text(profile.name),
      subtitle: Text(profile.email),
    );
  },
)

自定义选项视图

除了使用 suggestionBuilder，你还可以传递 optionsViewBuilder 来进行更多自定义：

optionsViewBuilder: (context, onSelected, options) {
  return Align(
    alignment: Alignment.topLeft,
    child: Material(
      elevation: 4.0,
      child: Container(
        height: 200.0,
        child: ListView.builder(
          padding: EdgeInsets.all(8.0),
          itemCount: options.length,
          itemBuilder: (BuildContext context, int index) {
            final option = options.elementAt(index);
            return GestureDetector(
              onTap: () {
                onSelected(option);
              },
              child: ListTile(
                key: ObjectKey(option),
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(option.imageUrl),
                ),
                title: Text(option.name),
                subtitle: Text(option.email),
              ),
            );
          },
        ),
      ),
    ),
  );
},