Flutter标签编辑插件material_tag_editor的使用
Flutter标签编辑插件material_tag_editor的使用
material_tag_editor
是一个用于在Flutter应用中创建和编辑标签的简单组件。它允许用户输入多个标签,并且可以通过分隔符(如逗号或空格)来区分不同的标签。此外,它还支持自定义标签样式、添加删除功能等特性。
更新说明
从版本0.0.6开始,修复了TagEditor
命名参数的拼写错误,将delimeters
改为delimiters
。这是一项破坏性更改,请确保在升级后更新您的代码以匹配新的参数名称。
使用方法
添加依赖
首先,在pubspec.yaml
文件中添加material_tag_editor
作为依赖项:
dependencies:
material_tag_editor: ^latest_version # 替换为最新版本号
然后执行flutter pub get
来安装该包。
导入库
接下来,在Dart文件顶部导入这个库:
import 'package:material_tag_editor/tag_editor.dart';
使用组件
以下是如何使用TagEditor
组件的基本示例:
TagEditor(
length: values.length, // 标签列表长度
delimiters: [',', ' '], // 分隔符数组
hasAddButton: true, // 是否显示添加按钮
inputDecoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Hint Text...',
),
onTagChanged: (newValue) {
setState(() {
values.add(newValue);
});
},
tagBuilder: (context, index) => _Chip(
index: index,
label: values[index],
onDeleted: onDelete,
),
)
这里我们创建了一个TagEditor
实例,并指定了几个重要的属性:
length
: 当前已有的标签数量。delimiters
: 用来分割输入文本成不同标签的字符集合。hasAddButton
: 是否展示一个“添加”按钮。inputDecoration
: 自定义输入框外观。onTagChanged
: 当新标签被添加时触发此回调函数。tagBuilder
: 定义如何构建每个单独的标签项,默认推荐使用Material Design风格的Chip
小部件。
示例代码
下面给出一个完整的例子,演示了如何在一个页面中集成TagEditor
并实现基本功能:
import 'package:flutter/material.dart';
import 'package:material_tag_editor/tag_editor.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material Tag Editor Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Material Tag Editor Demo'),
);
}
}
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> _values = [];
final FocusNode _focusNode = FocusNode();
final TextEditingController _textEditingController = TextEditingController();
void _onDelete(int index) {
setState(() {
_values.removeAt(index);
});
}
/// 模拟通过TextEditingController操作TextField
void _onPressedModifyTextField() {
final text = 'Test';
_textEditingController.text = text;
_textEditingController.value = _textEditingController.value.copyWith(
text: text,
selection: TextSelection(
baseOffset: text.length,
extentOffset: text.length,
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title ?? ''),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: ListView(
children: <Widget>[
TagEditor(
length: _values.length,
controller: _textEditingController,
focusNode: _focusNode,
delimiters: [',', ' '],
hasAddButton: true,
resetTextOnSubmitted: true,
textStyle: const TextStyle(color: Colors.grey),
onSubmitted: (outstandingValue) {
setState(() {
_values.add(outstandingValue);
});
},
inputDecoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Hint Text...',
),
onTagChanged: (newValue) {
setState(() {
_values.add(newValue);
});
},
tagBuilder: (context, index) => _Chip(
index: index,
label: _values[index],
onDeleted: _onDelete,
),
inputFormatters: [
FilteringTextInputFormatter.deny(RegExp(r'[/\\]'))
],
),
const Divider(),
ElevatedButton(
onPressed: _onPressedModifyTextField,
child: const Text('Use Controller to Set Value'),
),
],
),
),
),
);
}
}
class _Chip extends StatelessWidget {
const _Chip({
required this.label,
required this.onDeleted,
required this.index,
});
final String label;
final ValueChanged<int> onDeleted;
final int index;
@override
Widget build(BuildContext context) {
return Chip(
labelPadding: const EdgeInsets.only(left: 8.0),
label: Text(label),
deleteIcon: const Icon(
Icons.close,
size: 18,
),
onDeleted: () {
onDeleted(index);
},
);
}
}
在这个例子中,我们创建了一个包含TagEditor
的小部件,并设置了相关的配置选项。同时,我们还提供了一个按钮来演示如何通过TextEditingController
直接修改输入框内容。希望这段代码可以帮助您更好地理解和使用material_tag_editor
插件!
更多关于Flutter标签编辑插件material_tag_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter标签编辑插件material_tag_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter项目中使用material_tag_editor
插件的示例代码。这个插件允许你创建一个标签编辑器,用户可以在其中添加、删除和编辑标签。
首先,你需要在你的pubspec.yaml
文件中添加material_tag_editor
依赖:
dependencies:
flutter:
sdk: flutter
material_tag_editor: ^x.y.z # 请替换为最新版本号
然后,运行flutter pub get
来安装依赖。
接下来是一个完整的示例代码,展示如何在Flutter应用中使用material_tag_editor
:
import 'package:flutter/material.dart';
import 'package:material_tag_editor/material_tag_editor.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tag Editor Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TagEditorScreen(),
);
}
}
class TagEditorScreen extends StatefulWidget {
@override
_TagEditorScreenState createState() => _TagEditorScreenState();
}
class _TagEditorScreenState extends State<TagEditorScreen> {
final TextEditingController _controller = TextEditingController();
List<String> _tags = ['Flutter', 'Dart', 'Material Design'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Tag Editor Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialTagEditor(
initialTags: _tags,
onTagsChanged: (newTags) {
setState(() {
_tags = newTags;
});
},
textController: _controller,
onTagAdded: (newTag) {
print("Added tag: $newTag");
},
onTagDeleted: (deletedTag) {
print("Deleted tag: $deletedTag");
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Tags',
helperText: 'Press enter to add a tag',
),
),
SizedBox(height: 16.0),
Text('Current Tags: $_tags.join(", ")'),
],
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
解释
-
依赖添加:
- 在
pubspec.yaml
文件中添加material_tag_editor
依赖。
- 在
-
应用入口:
MyApp
是一个无状态的小部件,它定义了应用程序的主题和主页。
-
主屏幕:
TagEditorScreen
是一个有状态的小部件,它维护一个标签列表和文本控制器。
-
标签编辑器:
MaterialTagEditor
小部件用于显示和编辑标签。initialTags
属性设置初始标签列表。onTagsChanged
回调函数在标签列表更改时被调用。textController
用于控制输入文本。onTagAdded
和onTagDeleted
回调函数分别在添加和删除标签时被调用。decoration
属性定义了输入装饰,包括边框、标签文本和辅助文本。
-
显示当前标签:
- 一个简单的
Text
小部件用于显示当前标签列表。
- 一个简单的
-
资源清理:
- 在
dispose
方法中释放文本控制器资源。
- 在
通过这个示例,你可以轻松地在Flutter应用中使用material_tag_editor
插件来创建和管理标签。