Flutter高级搜索功能插件advanced_search的使用
Flutter高级搜索功能插件advanced_search的使用
advanced_search 是一个 Flutter 库，提供了通过 TextField 搜索预定义列表的高级功能。
如何使用？代码说明一切：
List<String> searchableList = ['Orange', 'Watermelon', 'Banana', /*...等*/];
AdvancedSearch( // 这基本上是一个输入文本字段
data: searchableList,
maxElementsToDisplay: 7,
onItemTap: (index) {
// 用户刚刚找到了他需要的内容，现在轮到你处理了
},
onSearchClear: () {
// 可能显示完整列表？或者什么都不做？由你决定
},
onSubmitted: (value, value2) {
// 现在你有一个提交的搜索结果
},
onEditingProgress: (value, value2) {
// 用户正在尝试查找某些内容，可能你想帮助他？
},
)
该包提供的完整功能集
回调函数
@required onItemTap// 当用户选择其中一个显示的搜索结果时onSearchClear// 当用户清除搜索时onSubmitted// 提交搜索结果时onEditingProgress// 当用户输入搜索词时，想要提供实时结果？使用此回调
必填输入
@required searchItems// 你的可搜索数据集（如果不想提供，可以传递空列表，然后你可以处理提交的搜索文本）
选项
selectedTextColor// 匹配文本在搜索结果中的颜色unSelectedTextColor// 不匹配文本在搜索结果中的颜色enabledBorderColor// 输入框启用时的边框颜色disabledBorderColor// 输入框禁用时的边框颜色focusedBorderColor// 输入框聚焦时的边框颜色cursorColor// 光标颜色searchItemsWidget// 你可以传递一个函数，该函数接受一个字符串（将被搜索结果项替换）并返回一个用于列出搜索结果的小部件（如果你传递此属性，请不要忘记传递合理的singleItemHeight）maxElementsToDisplay (默认值 = 7)// 作为搜索结果的最大显示数量borderRadius (默认值 = 10.0)// 搜索结果列表边框的圆角半径fontSize (默认值 = 14.0)// 输入框和搜索结果的字体大小singleItemHeight (默认值 = 45.0)// 搜索结果列表中每个项目的高度verticalPadding (默认值 = 10.0)// 输入框的垂直内边距horizontalPadding (默认值 = 10.0)// 输入框的水平内边距itemsShownAtStart (默认值 = 10)// 如果用户尚未开始搜索但点击了搜索输入框，应显示多少个项目hintText (默认值 = 'Enter a name')// 搜索输入框的提示文本hintTextColor (默认值 = Colors.grey)// 提示文本的颜色autoCorrect (默认值 = false)// 输入框的自动更正功能enabled (默认值 = true)// 是否启用搜索bgColor (默认值 = Colors.white)// 搜索结果小部件的背景颜色inputTextFieldBgColor// 输入框本身的背景颜色borderColor (默认值 = const Color(0xFFFAFAFA))// 搜索结果小部件的边框颜色searchMode (默认值 = SearchMode.CONTAINS)// 你希望应用的搜索条件是什么？结果是否包含、以…开头或完全匹配你的搜索caseSensitive (默认值 = false)// 是否希望搜索应用于可搜索列表时区分大小写minLettersForSearch (默认值 = 0)// 用户在开始接收搜索结果之前应输入的最小字母数clearSearchEnabled (默认值 = true)// 用户是否能够清除搜索showListOfResults (默认值 = true)// 是否应向用户显示结果列表，还是只获取他搜索的内容，然后由你自己处理hideHintOnTextInputFocus (默认值 = false)// 一个选项，在输入框获得焦点时隐藏提示文本autoListing (默认值 = false)// 一个选项，无需搜索即可立即显示结果（在这种情况下，它将显示最大显示元素数）
基本构建示例
AdvancedSearch(
data: ['Orange', 'Watermelon', 'Banana', 'Red Grapes'],
maxElementsToDisplay: 10,
singleItemHeight: 50,
borderColor: Colors.grey,
minLettersForSearch: 0,
selectedTextColor: Color(0xFF3363D9),
fontSize: 14,
borderRadius: 12.0,
hintText: 'Search Me',
cursorColor: Colors.blueGrey,
autoCorrect: false,
focusedBorderColor: Colors.blue,
searchResultsBgColor: Color(0xFAFAFA),
disabledBorderColor: Colors.cyan,
enabledBorderColor: Colors.black,
enabled: true,
caseSensitive: false,
inputTextFieldBgColor: Colors.white10,
clearSearchEnabled: true,
itemsShownAtStart: 10,
searchMode: SearchMode.CONTAINS,
showListOfResults: true,
unSelectedTextColor: Colors.black54,
verticalPadding: 10,
horizontalPadding: 10,
hideHintOnTextInputFocus: true,
hintTextColor: Colors.grey,
onItemTap: (index, value) {
print("selected item index is $index");
},
onSearchClear: () {
print("Cleared Search");
},
onSubmitted: (searchText, listOfResults) {
print("Submitted: " + searchText);
},
onEditingProgress: (searchText, listOfResults) {
print("TextEdited: " + searchText);
print("LENGTH: " + listOfResults.length.toString());
},
),
示例代码
import 'package:advanced_search/advanced_search.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Advanced Search Demo',
home: Scaffold(
body: HomePage(),
),
);
}
}
class HomePage extends StatelessWidget {
final List<String> searchableList = [
"Orange",
"Apple",
"Banana",
"Mango Orange",
"Carrot Apple",
"Yellow Watermelon",
"Zhe Fruit",
"White Oats",
"Dates",
"Raspberry Blue",
"Green Grapes",
"Red Grapes",
"Dragon Fruit"
];
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
margin: const EdgeInsets.only(top: 30.0, left: 30, right: 30),
child: AdvancedSearch(
searchItems: searchableList,
maxElementsToDisplay: 10,
singleItemHeight: 50,
borderColor: Colors.grey,
minLettersForSearch: 0,
selectedTextColor: Color(0xFF3363D9),
fontSize: 14,
borderRadius: 12.0,
hintText: 'Search Me',
cursorColor: Colors.blueGrey,
autoCorrect: false,
focusedBorderColor: Colors.blue,
searchResultsBgColor: Color(0xFAFAFA),
disabledBorderColor: Colors.cyan,
enabledBorderColor: Colors.black,
enabled: true,
caseSensitive: false,
inputTextFieldBgColor: Colors.white10,
clearSearchEnabled: true,
itemsShownAtStart: 10,
searchMode: SearchMode.CONTAINS,
showListOfResults: true,
unSelectedTextColor: Colors.black54,
verticalPadding: 10,
horizontalPadding: 10,
hideHintOnTextInputFocus: true,
hintTextColor: Colors.grey,
searchItemsWidget: searchWidget,
onItemTap: (index, value) {
print("selected item Index is $index");
},
onSearchClear: () {
print("Cleared Search");
},
onSubmitted: (value, value2) {
print("Submitted: " + value);
},
onEditingProgress: (value, value2) {
print("TextEdited: " + value);
print("LENGTH: " + value2.length.toString());
},
),
),
);
}
Widget searchWidget(String text) {
return ListTile(
title: Text(
text.length > 3 ? text.substring(0, 3) : text,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.indigoAccent),
),
subtitle: Text(
text,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontWeight: FontWeight.normal,
fontSize: 12,
color: Colors.black26,
),
),
);
}
}
致谢
感谢 auto_search 包的启发。
更多关于Flutter高级搜索功能插件advanced_search的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter高级搜索功能插件advanced_search的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何在Flutter项目中使用advanced_search插件来实现高级搜索功能的代码示例。需要注意的是，advanced_search并不是一个广泛认可的官方或流行插件，因此这里的代码示例是基于假设存在一个名为advanced_search的插件，并且它提供了基本的搜索UI组件和功能。如果实际上并不存在这样的插件，你可能需要寻找类似的插件或自己实现这些功能。
首先，确保你已经在pubspec.yaml文件中添加了advanced_search插件（如果它存在的话）：
dependencies:
flutter:
sdk: flutter
advanced_search: ^x.y.z # 假设的版本号
然后，运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中，你可以按照以下方式使用advanced_search插件（假设它提供了相应的组件和功能）：
import 'package:flutter/material.dart';
import 'package:advanced_search/advanced_search.dart'; // 假设的导入路径
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Advanced Search Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AdvancedSearchScreen(),
);
}
}
class AdvancedSearchScreen extends StatefulWidget {
@override
_AdvancedSearchScreenState createState() => _AdvancedSearchScreenState();
}
class _AdvancedSearchScreenState extends State<AdvancedSearchScreen> {
final TextEditingController _searchController = TextEditingController();
String _result = '';
void _onSearch(String query) {
// 这里假设有一个模拟的搜索函数
setState(() {
_result = 'Search Results for "$query"';
// 实际上，这里你应该调用你的搜索API或函数来处理查询
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Advanced Search Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// 使用假设的 AdvancedSearch 组件
AdvancedSearch(
controller: _searchController,
onSearch: _onSearch,
// 假设的其他配置参数
placeholder: 'Search...',
advancedOptions: [
// 假设可以添加高级搜索选项
AdvancedSearchOption(
title: 'Category',
values: ['All', 'News', 'Sports', 'Tech'],
),
AdvancedSearchOption(
title: 'Sort By',
values: ['Relevance', 'Date', 'Popularity'],
),
],
),
SizedBox(height: 16.0),
Text(
_result,
style: TextStyle(fontSize: 18.0),
),
],
),
),
);
}
@override
void dispose() {
_searchController.dispose();
super.dispose();
}
}
// 假设的 AdvancedSearchOption 类（实际上可能由插件提供）
class AdvancedSearchOption {
final String title;
final List<String> values;
AdvancedSearchOption({required this.title, required this.values});
}
// 注意：以下 AdvancedSearch 组件是一个假设的实现，实际插件可能会有所不同
// 假设的 AdvancedSearch 组件（实际上应该由插件提供）
class AdvancedSearch extends StatefulWidget {
final TextEditingController controller;
final VoidCallback? onSearch;
final String placeholder;
final List<AdvancedSearchOption> advancedOptions;
AdvancedSearch({
required this.controller,
this.onSearch,
required this.placeholder,
required this.advancedOptions,
});
@override
_AdvancedSearchState createState() => _AdvancedSearchState();
}
class _AdvancedSearchState extends State<AdvancedSearch> {
@override
Widget build(BuildContext context) {
// 这里应该实现一个复杂的搜索UI，包括搜索框和高级选项
// 但由于这是一个假设的示例，我们只展示一个简单的搜索框
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextField(
controller: widget.controller,
decoration: InputDecoration(
prefixIcon: Icon(Icons.search),
hintText: widget.placeholder,
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
widget.onSearch?.call(widget.controller.text);
},
),
),
),
// 假设的高级选项（实际上应该有更复杂的UI）
for (var option in widget.advancedOptions)
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(option.title, style: TextStyle(fontWeight: FontWeight.bold)),
Wrap(
children: List.generate(
option.values.length,
(index) => Chip(
label: Text(option.values[index]),
),
),
),
],
),
),
],
);
}
}
请注意，上面的代码包含了许多假设，特别是关于AdvancedSearch和AdvancedSearchOption类的实现。在实际使用中，你应该查阅advanced_search插件的文档来了解如何正确配置和使用它。如果实际上并不存在这样的插件，你可能需要寻找其他提供类似功能的插件，或者自己实现高级搜索UI和功能。
