flutter_tags

Flutter 标签可让您创建标签列表或通过输入动态插入标签。

安装

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  flutter_tags: "^0.1.9"

演示

Example

example1.2

example2.2

可选标签

Tag 类有一些可选参数。如果您想插入图标，则不显示标题，但您始终可以使用它。

Tag(
    id: 1,// optional
    icon: Icon.home, // optional
    title: 'First Tag', // required
    active: true, // optional
)

简单用法

import 'package:flutter_tags/selectable_tags.dart';
.
.
.

List<Tag> _tags=[];

@override
void initState()
{
    super.initState();
    
    // if you store data on a local database (sqflite), then you could do something like this
    Model().getItems().then((items){
        items.forEach((item) =>
            _tags.add(
                Tag(
                    id: item.id,
                    title: item.title, 
                    active: bool.fromEnvironment(item.active) == "true",
                )
            )
        );  
    });
    
}


//Widget
SelectableTags(
    tags: _tags,
    columns: 3, // default 4
    symmetry: true, // default false
    onPressed: (tag){
        print(tag);
    },
)

void _getActiveTags()
{
    _tags.where((tag) => tag.active).forEach((tag) => print(tag.title));
}

void _getDisableTags()
{
    _tags.where((tag) => !tag.active).forEach((tag) => print(tag.title));
}

所有参数

  • tags - 'Tag' 列表
  • columns - 最大列数 (默认 4)
  • height - 自定义标签高度 (默认自动调整大小)
  • borderRadius - 自定义边框半径
  • borderSide - 边框样式
  • boxShadow - 标签的boxshadow列表
  • symmetry - 布尔值
  • singleItem - 默认 false - 与 Radiobutton 组 HTML 相同
  • margin - 标签之间的边距
  • alignment - 默认 MainAxisAlignment.center
  • offset - 不同字符可能宽度不同（例如：中文字符）； (默认 28)
  • fontSize - 默认 14
  • textOverflow - 省略号、剪切... (默认淡出)
  • textColor - 默认黑色
  • textActiveColor - 默认白色
  • color - 标签背景色 (默认白色)
  • activeColor - 激活标签的背景色 (默认绿色)
  • backgroundContainer - 默认白色
  • onPressed - 方法

输入标签

笔记

您将在控制台中收到一些错误。
InputTags 工作不正常，因为 textField 存在一些 bug。
这里有一个
Bug 1

简单用法

import 'package:flutter_tags/input_tags.dart';
.
.
.

List<String> _tags=[];

@override
void initState()
{
    super.initState();
    _tags.addAll(
         [
             'first tag',
             'android world',
             'substring',
             'last tag',
             'enable'
         ]
    );
    
}


//Widget
InputTags(
    tags: _tags,
    onDelete: (tag){
        print(tag);
    },
    onInsert: (tag){
        print(tag);
    },
)

void _getTags()
{
    _tags.forEach((tag) => print(tag));
}

所有参数

  • tags - 'String' 列表
  • columns - 最大列数 (默认 4)
  • autofocus - 默认 true
  • inputDecoration - 文本输入样式
  • maxLength - 文本字段的最大长度 (int)
  • keyboardType - TextInputType
  • height - 自定义标签高度 (默认自动调整大小)
  • borderRadius - 自定义边框半径 (默认 3)
  • boxShadow - 标签的boxshadow列表
  • symmetry - 默认 false
  • margin - 标签之间的边距
  • alignment - 默认 MainAxisAlignment.center
  • offset - 默认 3
  • duplicate - 允许您插入重复项 (默认 false)
  • fontSize - 默认 14
  • iconSize - 默认自动调整大小
  • iconColor - 默认白色
  • iconBackground - 默认透明
  • textOverflow - 省略号、剪切... (默认淡出)
  • textColor - 默认白色
  • lowerCase - 默认 false
  • color - 标签背景色 (默认绿色)
  • backgroundContainer - 默认白色
  • highlightColor - 默认绿色 '700'
  • onDelete - 返回已删除的标签
  • onInsert - 返回输入的标签

GitHub

https://github.com/Dn-a/flutter_tags