flutter_tags

pub package Awesome Flutter Donate

快速轻松地创建漂亮的标签。

安装

将此添加到您项目的 pubspec.yaml 文件中:空安全版本(Beta) 更多信息

dependencies:
  flutter_tags: "^1.0.0-nullsafety.1"

演示

简单用法

import 'package:flutter_tags/flutter_tags.dart';
.
.
.
List _items;
double _fontSize = 14;

@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 = items;
        });
}

@override
Widget build(BuildContext context) {
    return Tags(
      key:_tagStateKey,
      textField: TagsTextField(
        textStyle: TextStyle(fontSize: _fontSize),
        constraintSuggestion: true, suggestions: [],
        //width: double.infinity, padding: EdgeInsets.symmetric(horizontal: 10),
        onSubmitted: (String str) {
          // Add item to the data source.
          setState(() {             
             // required             
            _items.add(Item(
                title: str,
                active: true,
                index: 1,                
              ));
          });
        },
      ),
      itemCount: _items.length, // required
      itemBuilder: (int index){          
            final item = _items[index];
    
            return ItemTags(
                  // Each ItemTags must contain a Key. Keys allow Flutter to
                  // uniquely identify widgets.
                  key: Key(index.toString()),
                  index: index, // required
                  title: item.title,
                  active: item.active,
                  customData: item.customData,
                  textStyle: TextStyle( fontSize: _fontSize, ),
                  combine: ItemTagsCombine.withTextBefore,
                  image: ItemTagsImage(
                    image: AssetImage("img.jpg") // OR NetworkImage("https://...image.png")
                  ), // OR null,
                  icon: ItemTagsIcon(
                    icon: Icons.add,
                  ), // OR null,
                  removeButton: ItemTagsRemoveButton(
                    onRemoved: (){
                        // Remove the item from the data source.
                        setState(() {
                            // required
                            _items.removeAt(index);
                        });
                        //required
                        return true;
                    },
                  ), // OR null,
                  onPressed: (item) => print(item),
                  onLongPressed: (item) => print(item),
            );
    
      },
    );    
}

final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();
// Allows you to get a list of all the ItemTags
_getAllItem(){
    List<Item> lst = _tagStateKey.currentState?.getAllItem;
    if(lst!=null)
        lst.where((a) => a.active==true).forEach( ( a) => print(a.title));        
}

已包装的小部件示例

您可以自由地将 ItemTags () 包装在另一个小部件中

Tags(  
      itemCount: items.length, 
      itemBuilder: (int index){ 
          return Tooltip(
          message: item.title,
          child:ItemTags(
            title:item.title,
          )
          );
      },
    );    

Tags() 参数

属性名 描述 默认值
列数 如有必要,可以设置列数
项目数 要显示的标签数量 必需
对称性 可以水平查看和滚动标签
水平滚动 抽屉宽度偏移 0.4
heightHorizontalScroll 设置 HorizontalScroll 的高度以正确显示标签 60
spacing 标签之间的水平间距 6
runSpacing 标签之间的垂直间距 14
alignment 水平换行对齐 WrapAlignment.center
运行对齐 垂直换行对齐 WrapAlignment.center
direction ItemTags 的方向 Axis.horizontal
垂直方向 从下到上或从上到下迭代 ItemTags VerticalDirection.down
textDirection ItemTags 的文本方向 TextDirection.ltr
itemBuilder 标签生成器
文本框 添加文本框 TagsTextFiled()

ItemTags() 参数

  • index – *必需*
  • title – *必需*
  • textScaleFactor – *自定义文本缩放因子*
  • active – *布尔值(默认为 true)*
  • pressEnabled – *激活按下标签(默认为 true)*
  • customData – *可以将任何自定义值添加到 customData 字段,稍后可以检索。一个很好的例子:存储 Firestore 文档的 id。*
  • textStyle – *textStyle()*
  • alignment – *MainAxisAlignment(默认为 MainAxisAlignment.center)*
  • combine – *能够以不同的方式组合文本、图标、图像(默认为 ItemTagsCombine.imageOrIconOrText)*
  • icon – *ItemTagsIcon()*
  • image – *ItemTagsImage()*
  • removeButton – *ItemTagsRemoveButton()*
  • borderRadius – *BorderRadius*
  • border – *自定义边框侧*
  • padding – *默认 EdgeInsets.symmetric(horizontal: 7, vertical: 5)*
  • elevation – *默认 5*
  • singleItem – *默认 false*
  • textOverflow – *默认 TextOverflow.fade*
  • textColor – *默认 Colors.black*
  • textActiveColor – *默认 Colors.white*
  • color – *默认 Colors.white*
  • activeColor – *默认 Colors.blueGrey*
  • highlightColor
  • splashColor
  • colorShowDuplicate – *默认 Colors.red*
  • onPressed – *回调*
  • onLongPressed – *回调*
  • onRemoved – *回调*

捐赠

开展这个项目需要时间。如果您觉得它有用或从源代码中学到了东西,请考虑捐赠 5、20、50 欧元或任何您可以支持该项目的金额。

  • Donate

问题

如果您遇到问题,请打开一个 issue。也欢迎 Pull Request。

GitHub

查看 Github