Flutter标签输入插件tag_form_field的使用

Flutter标签输入插件tag_form_field的使用

TagFormField 是一个可定制的 Flutter 小部件，允许用户在表单字段中输入和显示标签。它提供了一个直观的界面，用于将标签以逗号分隔的形式添加，并以交互式芯片的形式显示它们。

特性

  • 使用逗号分隔轻松输入多个标签
  • 显示标签为交互式芯片
  • 单击即可移除标签
  • 可自定义输入字段装饰
  • 标签列表更改时的回调

安装

在你的包的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  tag_form_field: ^0.0.1

然后运行：

$ flutter pub get

使用

在 Dart 代码中导入该包：

import 'package:tag_form_field/tag_form_field.dart';

在 Flutter 应用中使用 TagFormField 小部件：

TagFormField(
  decoration: InputDecoration(
    labelText: 'Enter tags',
    hintText: 'Enter tags separated by commas',
  ),
  onValueChanged: (tags) {
    print('Current tags: $tags');
  },
)

示例

这是一个更完整的示例，展示了如何在表单中使用 TagFormField：

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

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('标签输入示例')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TagFormField(
              decoration: InputDecoration(
                labelText: '标签',
                hintText: '输入逗号分隔的标签',
                border: OutlineInputBorder(),
              ),
              onValueChanged: (tags) {
                print('标签更新: $tags');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text('提交'),
              onPressed: () {
                // 处理表单提交
              },
            ),
          ],
        ),
      ),
    );
  }
}

自定义

你可以通过向 decoration 参数提供 InputDecoration 来自定义 TagFormField 的外观。这允许你更改标签、提示文本、边框和其他输入字段的视觉方面。

芯片的外观基于应用当前的主题。你可以通过修改应用的主题或扩展 TagFormField 小部件来提供更多特定的样式选项。

贡献

欢迎贡献！如果你发现了一个错误或想要添加一个功能，请打开一个问题或提交一个拉取请求。

许可证

该项目根据 MIT 许可证授权 - 详情见 LICENSE 文件。


更多关于Flutter标签输入插件tag_form_field的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter标签输入插件tag_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


tag_form_field 是一个用于 Flutter 的标签输入插件，允许用户在输入框中输入多个标签或选择标签。它非常适合用于需要用户输入多个标签的场景，比如添加标签、选择兴趣等。

安装

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  tag_form_field: ^0.0.1

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

基本用法

以下是一个简单的使用 tag_form_field 的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tag Form Field Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: TagFormField(
            onChanged: (List<String> tags) {
              print('Current tags: $tags');
            },
            validator: (List<String> tags) {
              if (tags.isEmpty) {
                return 'Please enter at least one tag';
              }
              return null;
            },
          ),
        ),
      ),
    );
  }
}

主要属性

TagFormField 提供了多个属性来定制标签输入框的行为和外观：

  • onChanged: 当标签发生变化时触发的回调函数。
  • validator: 用于验证标签列表的验证器函数。
  • initialTags: 初始的标签列表。
  • tagBuilder: 自定义标签的显示方式。
  • inputDecoration: 输入框的装饰。
  • tagSpacing: 标签之间的间距。
  • tagPadding: 标签的内边距。
  • tagMargin: 标签的外边距。
  • tagColor: 标签的背景颜色。
  • tagTextStyle: 标签的文本样式。
  • deleteIcon: 删除标签的图标。
  • suggestions: 提供自动补全的建议列表。
  • onSuggestionSelected: 当用户选择建议时的回调函数。

自定义标签显示

你可以通过 tagBuilder 属性来自定义标签的显示方式。例如：

TagFormField(
  tagBuilder: (context, tag) {
    return Chip(
      label: Text(tag),
      backgroundColor: Colors.blue,
      deleteIcon: Icon(Icons.close, size: 18),
      onDeleted: () {
        // 在这里处理删除标签的逻辑
      },
    );
  },
  onChanged: (List<String> tags) {
    print('Current tags: $tags');
  },
)

自动补全

你可以通过 suggestions 和 onSuggestionSelected 属性来实现自动补全功能：

TagFormField(
  suggestions: ['Flutter', 'Dart', 'Widget', 'State', 'Provider'],
  onSuggestionSelected: (String suggestion) {
    // 在这里处理用户选择建议的逻辑
  },
  onChanged: (List<String> tags) {
    print('Current tags: $tags');
  },
)

验证

你可以通过 validator 属性来验证标签列表。例如，确保用户至少输入一个标签：

TagFormField(
  validator: (List<String> tags) {
    if (tags.isEmpty) {
      return 'Please enter at least one tag';
    }
    return null;
  },
  onChanged: (List<String> tags) {
    print('Current tags: $tags');
  },
)
回到顶部