flutter_tags
快速轻松地创建漂亮的标签。
安装
将此添加到您项目的 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 欧元或任何您可以支持该项目的金额。
问题
如果您遇到问题,请打开一个 issue。也欢迎 Pull Request。

