Flutter标签管理插件flutter_tags_x的使用
Flutter标签管理插件flutter_tags_x的使用
简介
flutter_tags_x
是一个用于快速创建漂亮标签的Flutter插件。它是从 Dn-a/flutter_tags
分支而来,并且已经支持空安全。
安装
在你的 pubspec.yaml
文件中添加以下依赖:
dependencies:
flutter_tags_x: ^最新版本 # 替换为最新版本号
更多关于空安全的信息可以参考 Dart文档。
示例代码
基本用法
import 'package:flutter/material.dart';
import 'package:flutter_tags_x/flutter_tags_x.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tags Demo',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: MyHomePage(title: 'Flutter Tags'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _items = [];
double _fontSize = 14;
final GlobalKey<TagsState> _tagStateKey = GlobalKey<TagsState>();
@override
void initState() {
super.initState();
// 如果你存储数据在一个本地数据库(如sqflite),你可以这样做:
// Model().getItems().then((items){
// _items = items;
// });
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Tags(
key: _tagStateKey,
textField: TagsTextField(
textStyle: TextStyle(fontSize: _fontSize),
constraintSuggestion: true,
suggestions: [],
onSubmitted: (String str) {
setState(() {
_items.add(str);
});
},
),
itemCount: _items.length,
itemBuilder: (int index) {
final item = _items[index];
return ItemTags(
key: Key(index.toString()),
index: index,
title: item,
active: true,
textStyle: TextStyle(fontSize: _fontSize),
removeButton: ItemTagsRemoveButton(
onRemoved: () {
setState(() {
_items.removeAt(index);
});
return true;
},
),
onPressed: (item) => print(item),
onLongPressed: (item) => print(item),
);
},
),
),
);
}
// 获取所有激活的ItemTags
void _getAllItem() {
List<Item> lst = _tagStateKey.currentState?.getAllItem;
if (lst != null) {
lst.where((a) => a.active == true).forEach((a) => print(a.title));
}
}
}
包裹Widget示例
你可以在 ItemTags()
外面包裹其他Widget,例如 Tooltip
:
Tags(
itemCount: items.length,
itemBuilder: (int index) {
return Tooltip(
message: items[index].title,
child: ItemTags(
title: items[index].title,
),
);
},
);
Tags()
参数说明
参数名 | 描述 | 默认值 |
---|---|---|
columns | 设置列数 | null |
itemCount | 显示的标签数量 | 必填 |
symmetry | 是否对称显示标签 | false |
horizontalScroll | 是否水平滚动 | false |
heightHorizontalScroll | 水平滚动时的高度 | 60 |
spacing | 标签之间的水平间距 | 6 |
runSpacing | 标签之间的垂直间距 | 14 |
alignment | 水平方向的对齐方式 | WrapAlignment.center |
runAlignment | 垂直方向的对齐方式 | WrapAlignment.center |
direction | 标签的方向 | Axis.horizontal |
verticalDirection | 迭代标签的方向 | VerticalDirection.down |
textDirection | 文本方向 | TextDirection.ltr |
itemBuilder | 标签生成器 | - |
textField | 添加文本框 | TagsTextField() |
ItemTags()
参数说明
index
- 必填title
- 必填textScaleFactor
- 自定义文本缩放因子active
- 布尔值,默认为truepressEnabled
- 是否启用点击事件,默认为truecustomData
- 可以添加自定义数据textStyle
- 文本样式alignment
- MainAxisAlignment,默认为MainAxisAlignment.centercombine
- 组合文本、图标、图片的方式,默认为ItemTagsCombine.imageOrIconOrTexticon
- 图标image
- 图片removeButton
- 删除按钮borderRadius
- 圆角半径border
- 边框样式padding
- 内边距,默认EdgeInsets.symmetric(horizontal: 7, vertical: 5)elevation
- 阴影,默认5singleItem
- 是否单个标签,默认falsetextOverflow
- 文本溢出处理,默认TextOverflow.fadetextColor
- 文本颜色,默认Colors.blacktextActiveColor
- 激活状态下的文本颜色,默认Colors.whitecolor
- 背景颜色,默认Colors.whiteactiveColor
- 激活状态下的背景颜色,默认Colors.blueGreyhighlightColor
- 高亮颜色splashColor
- 波纹颜色colorShowDuplicate
- 重复项的颜色,默认Colors.redonPressed
- 点击回调onLongPressed
- 长按回调onRemoved
- 删除回调
问题反馈
如果你遇到任何问题,请打开一个issue。也欢迎提交Pull Request。
希望这个示例能帮助你理解如何使用 flutter_tags_x
插件来管理和展示标签。如果有任何问题或需要进一步的帮助,请随时提问!
更多关于Flutter标签管理插件flutter_tags_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter标签管理插件flutter_tags_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中集成和使用flutter_tags_x
插件的一个详细示例。flutter_tags_x
是一个功能强大的标签管理插件,允许你创建和管理可编辑的标签列表。
1. 添加依赖
首先,在你的pubspec.yaml
文件中添加flutter_tags_x
依赖:
dependencies:
flutter:
sdk: flutter
flutter_tags_x: ^2.0.0 # 请检查最新版本号
然后运行flutter pub get
来安装依赖。
2. 导入插件
在你需要使用标签管理的Dart文件中导入插件:
import 'package:flutter_tags_x/flutter_tags_x.dart';
3. 使用插件
下面是一个完整的示例,展示如何在Flutter应用中使用flutter_tags_x
来创建和管理标签。
import 'package:flutter/material.dart';
import 'package:flutter_tags_x/flutter_tags_x.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tags X Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TagsScreen(),
);
}
}
class TagsScreen extends StatefulWidget {
@override
_TagsScreenState createState() => _TagsScreenState();
}
class _TagsScreenState extends State<TagsScreen> {
List<String> tags = ['Flutter', 'Dart', 'Programming'];
TextEditingController textEditingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Tags X Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Selected Tags:',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
Expanded(
child: TagsInput(
text: textEditingController.text,
tags: tags,
suggestions: ['React', 'Angular', 'Swift', 'Kotlin', 'Java'],
onDelete: (index) {
setState(() {
tags.removeAt(index);
});
},
onAdd: (newTag) {
if (!tags.contains(newTag)) {
setState(() {
tags.add(newTag);
textEditingController.clear();
});
}
},
onChange: (text) {
setState(() {
textEditingController.value = TextEditingValue(
text: text,
selection: TextSelection.fromPosition(
TextPosition(offset: text.length),
),
);
});
},
controller: textEditingController,
maxTags: 5,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Add a tag',
),
),
),
],
),
),
);
}
}
代码解释
- 依赖和导入:在
pubspec.yaml
中添加flutter_tags_x
依赖,并在需要使用它的Dart文件中导入。 - UI结构:使用
Scaffold
、AppBar
和Column
来构建UI。 - 状态管理:使用
StatefulWidget
和setState
来管理标签列表和输入框的状态。 - TagsInput:
text
:输入框的当前文本。tags
:当前选中的标签列表。suggestions
:建议的标签列表(可选)。onDelete
:删除标签时的回调。onAdd
:添加新标签时的回调。onChange
:输入框内容变化时的回调。controller
:TextEditingController
,用于控制输入框。maxTags
:允许的最大标签数量。decoration
:输入框的装饰。
运行项目
确保你已经正确添加了依赖并导入了插件,然后运行你的Flutter项目。你应该会看到一个带有标签输入框和已选标签列表的界面。你可以添加、删除和编辑标签。
希望这个示例对你有帮助!如果有更多问题,请随时询问。