Flutter自动补全标签插件flutter_autocomplete_label的使用
Flutter自动补全标签插件 flutter_autocomplete_label
的使用
flutter_autocomplete_label
是一个高度可定制的自动完成标签(tag)字段的小部件,支持多种功能如设置标签源、预设选中的标签等。
主要功能
- 支持设置标签源
- 支持预设选中的标签
- 支持创建文本输入框
- 支持创建可选标签列表
- 支持创建已确认标签列表
- 支持设置可选标签列表的垂直方向
- 以及其他更多功能
示例代码
以下是一个完整的示例demo,展示了如何使用 flutter_autocomplete_label
插件:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_autocomplete_label/autocomplete_label.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'AutocompleteLabel Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'AutocompleteLabel Example Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final AutocompleteLabelController<String> _autocompleteLabelController =
AutocompleteLabelController<String>(source: [
"Android",
"iOS",
"Flutter",
"Windows",
"Web",
"Fuchsia",
"Dart",
"Golang",
"Java",
"Python",
"Ruby",
"c/c++",
"Kotlin",
"Swift",
"HTML",
"CSS",
"JavaScript",
"PHP",
"GitHub",
"Google",
"Facebook",
"KnowlGraph",
"Twitter",
"Tiktok",
"StackOverflow",
"WeiXin",
"Alibaba",
"youtube",
]);
bool _keepAutofocus = false;
[@override](/user/override)
void dispose() {
_autocompleteLabelController.dispose();
super.dispose();
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
Switch(
value: _keepAutofocus,
onChanged: (value) {
setState(() {
_keepAutofocus = value;
});
},
)
],
),
body: Padding(
padding: EdgeInsets.all(8.0),
child: Center(
child: Row(
children: [
Expanded(
flex: 1,
child: AutocompleteLabel<String>(
keepAutofocus: _keepAutofocus,
onChanged: (values) => print("$values"),
autocompleteLabelController: _autocompleteLabelController,
),
),
],
),
),
),
);
}
}
更多关于Flutter自动补全标签插件flutter_autocomplete_label的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自动补全标签插件flutter_autocomplete_label的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用 flutter_autocomplete_label
插件的示例代码。这个插件允许你在 Flutter 应用中实现自动补全标签的功能。首先,确保你已经在 pubspec.yaml
文件中添加了该插件的依赖:
dependencies:
flutter:
sdk: flutter
flutter_autocomplete_label: ^最新版本号 # 请替换为实际的最新版本号
然后,运行 flutter pub get
来安装依赖。
接下来是一个完整的示例代码,展示了如何使用 flutter_autocomplete_label
插件:
import 'package:flutter/material.dart';
import 'package:flutter_autocomplete_label/flutter_autocomplete_label.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter AutoComplete Label Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AutoCompleteLabelDemo(),
);
}
}
class AutoCompleteLabelDemo extends StatefulWidget {
@override
_AutoCompleteLabelDemoState createState() => _AutoCompleteLabelDemoState();
}
class _AutoCompleteLabelDemoState extends State<AutoCompleteLabelDemo> {
final List<String> suggestions = [
'Apple',
'Banana',
'Cherry',
'Date',
'Elderberry',
'Fig',
'Grape',
'Honeydew',
'Kiwi',
'Lemon'
];
final TextEditingController _controller = TextEditingController();
List<String> _selectedLabels = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AutoComplete Label Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AutoCompleteLabelField<String>(
suggestions: suggestions,
onSubmitted: (label) {
setState(() {
_selectedLabels.add(label);
_controller.clear();
});
},
onDeleted: (label) {
setState(() {
_selectedLabels.remove(label);
});
},
controller: _controller,
itemBuilder: (context, label) {
return ListTile(
title: Text(label),
);
},
selectedLabels: _selectedLabels,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Type to add a label',
suffixIcon: IconButton(
icon: Icon(Icons.clear),
onPressed: () {
_controller.clear();
setState(() {
// Optionally, you can also clear selected labels here if needed
// _selectedLabels.clear();
});
},
),
),
),
SizedBox(height: 16),
Wrap(
spacing: 8,
runSpacing: 8,
children: List.generate(
_selectedLabels.length,
(index) => Chip(
label: Text(_selectedLabels[index]),
onDeleted: () {
setState(() {
_selectedLabels.removeAt(index);
});
},
),
),
),
],
),
),
);
}
}
代码解释:
- 依赖引入:在
pubspec.yaml
中添加flutter_autocomplete_label
依赖。 - 主函数:创建一个基本的 Flutter 应用。
- 数据准备:定义一个
suggestions
列表,其中包含可能的自动补全建议。 - 状态管理:使用
StatefulWidget
来管理选中的标签和文本控制器。 - 界面构建:
- 使用
AutoCompleteLabelField
小部件来创建自动补全标签输入框。 - 配置
suggestions
、onSubmitted
和onDeleted
回调来处理用户输入和删除操作。 - 使用
itemBuilder
来自定义建议项的显示方式。 - 使用
selectedLabels
来显示已选中的标签。 - 使用
InputDecoration
来美化输入框。
- 使用
- 已选中标签显示:使用
Wrap
和Chip
小部件来显示已选中的标签,并提供删除功能。
这个示例代码展示了如何使用 flutter_autocomplete_label
插件来创建一个带有自动补全功能的标签输入框,并显示用户已选中的标签。你可以根据需要进一步自定义和扩展这个示例。