Flutter文本标签输入插件textfieldwithtags的使用
Flutter文本标签输入插件textfieldwithtags的使用
此小部件允许你创建一个文本字段，可以输入文本并将其显示为标签。这些标签可以根据你的偏好进行自定义。该小部件还接受一个控制器，你可以通过扩展它来自定义控制器并继承其功能。
环境
sdk: ">=2.12.0 <3.0.0"
flutter: ">=1.17.0"
安装
在 pubspec.yaml 文件中添加依赖：
dependencies:
textfieldwithtags: ^1.0.0
然后运行以下命令以获取依赖项：
$ flutter pub get
入门
要开始使用此小部件，你需要按照在 Flutter.dev 上找到的安装指南将包导入到项目中。
使用
要使用此小部件，请执行以下步骤：
-
在 Dart 文件中导入包：
import 'package:textfieldwithtags/textfieldwithtags.dart'; -
调用小部件
TextFieldTags()。 -
小部件接受8个参数：
List<String>? initialTags，FocusNode? focusNode，TextEditingController? textEditingController，List<String>? textSeparators，LetterCase? letterCase，Validator? validator，InputFieldBuilder inputfieldBuilder，TextfieldTagsController? textfieldController。请阅读 API 文档以了解这些属性的详细信息。
示例代码
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
[@override](/user/override)
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
double _distanceToField;
TextfieldTagsController _controller;
[@override](/user/override)
void didChangeDependencies() {
super.didChangeDependencies();
_distanceToField = MediaQuery.of(context).size.width;
}
[@override](/user/override)
void dispose() {
super.dispose();
_controller.dispose();
}
[@override](/user/override)
void initState() {
super.initState();
_controller = TextfieldTagsController();
}
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: "欢迎",
home: Scaffold(
appBar: AppBar(
backgroundColor: const Color.fromARGB(255, 74, 137, 92),
centerTitle: true,
title: const Text('请输入标签...'),
),
body: Column(
children: [
TextFieldTags(
textfieldTagsController: _controller,
initialTags: const [
'选择',
'你最喜欢的',
'编程语言'
],
textSeparators: const [' ', ','],
letterCase: LetterCase.normal,
validator: (String tag) {
if (tag == 'php') {
return '不，拜托不要';
} else if (_controller.getTags.contains(tag)) {
return '你已经输入过这个了';
}
return null;
},
inputfieldBuilder:
(context, tec, fn, error, onChanged, onSubmitted) {
return ((context, sc, tags, onTagDelete) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: TextField(
controller: tec,
focusNode: fn,
decoration: InputDecoration(
isDense: true,
border: const OutlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 74, 137, 92),
width: 3.0,
),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 74, 137, 92),
width: 3.0,
),
),
helperText: '输入语言...',
helperStyle: const TextStyle(
color: Color.fromARGB(255, 74, 137, 92),
),
hintText: _controller.hasTags ? '' : "请输入标签...",
errorText: error,
prefixIconConstraints:
BoxConstraints(maxWidth: _distanceToField * 0.74),
prefixIcon: tags.isNotEmpty
? SingleChildScrollView(
controller: sc,
scrollDirection: Axis.horizontal,
child: Row(
children: tags.map((String tag) {
return Container(
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(20.0),
),
color: Color.fromARGB(255, 74, 137, 92),
),
margin: const EdgeInsets.symmetric(
horizontal: 5.0),
padding: const EdgeInsets.symmetric(
horizontal: 10.0, vertical: 5.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Text(
'#$tag',
style: const TextStyle(
color: Colors.white),
),
onTap: () {
print("$tag 选中");
},
),
const SizedBox(width: 4.0),
InkWell(
child: const Icon(
Icons.cancel,
size: 14.0,
color: Color.fromARGB(
255, 233, 233, 233),
),
onTap: () {
onTagDelete(tag);
},
)
],
),
);
}).toList()),
)
: null,
),
onChanged: onChanged,
onSubmitted: onSubmitted,
),
);
});
},
),
ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
const Color.fromARGB(255, 74, 137, 92),
),
),
onPressed: () {
_controller.clearTags();
},
child: const Text('清除标签'),
),
],
),
),
);
}
}
高级功能通过自定义控制器
如果你觉得默认控制器提供的功能不够，你可以轻松地扩展控制器类到自己的自定义类，并继承所有功能并添加自己的方法。
示例代码
// 创建自己的自定义控制器
class MyCustomController extends TextfieldTagsController {
MyCustomController() : super();
// 创建自己的方法
void myCustomMethod() {
// 自定义逻辑
}
// 覆盖父类方法
[@override](/user/override)
set addTag(String tag) {
if (tag != 'php') {
super.addTag = tag;
notifyListeners();
} else {
_error = '?';
}
}
}
final _myCustomController = MyCustomController();
TextFieldTags(textfieldController: _myCustomController);
更多关于Flutter文本标签输入插件textfieldwithtags的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter文本标签输入插件textfieldwithtags的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter中使用textfield_tags插件来实现文本标签输入的示例代码。这个插件允许用户在输入框中添加和管理多个标签。
首先，你需要在pubspec.yaml文件中添加textfield_tags依赖：
dependencies:
flutter:
sdk: flutter
textfield_tags: ^2.0.0 # 请确保使用最新版本，版本号可能会更新
然后，运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例代码，展示了如何创建一个带有标签输入的页面：
import 'package:flutter/material.dart';
import 'package:textfield_tags/textfield_tags.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Textfield with Tags Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TagsScreen(),
);
}
}
class TagsScreen extends StatefulWidget {
@override
_TagsScreenState createState() => _TagsScreenState();
}
class _TagsScreenState extends State<TagsScreen> {
final TextEditingController _controller = TextEditingController();
List<String> _suggestions = [
'Apple',
'Banana',
'Cherry',
'Date',
'Elderberry',
'Fig',
'Grape',
'Honeydew',
'Indian Fig',
'Jackfruit'
];
List<String> _tags = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Textfield with Tags'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: TagsTextField(
controller: _controller,
suggestions: _suggestions,
onChanged: (tags) {
setState(() {
_tags = tags;
});
},
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter tags',
hintText: 'Press enter to add a tag',
),
),
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
TextButton(
onPressed: () {
setState(() {
_tags.clear();
_controller.clear();
});
},
child: Text('Clear'),
),
TextButton(
onPressed: () {
print('Current tags: $_tags');
},
child: Text('Show Tags'),
),
],
),
),
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
在这个示例中：
TextFieldTags组件用于创建带有标签输入的文本字段。_suggestions列表包含用于自动完成的建议标签。_tags列表存储用户添加的标签。onChanged回调用于在用户添加或删除标签时更新_tags列表。- 底部导航栏包含两个按钮：一个用于清除所有标签和文本字段内容，另一个用于在控制台打印当前标签。
确保你已经正确安装并导入了textfield_tags插件，然后运行这个示例代码，你将看到一个可以输入和管理标签的文本字段。
