Flutter搜索栏插件easy_search_bar_2的使用
Flutter搜索栏插件easy_search_bar_2的使用
预览
安装
在你的Flutter项目的pubspec.yaml
文件中添加以下依赖:
dependencies:
easy_search_bar_2: ^1.0.0-alpha.0
从easy_search_bar迁移到easy_search_bar_2
迁移时需要进行一些简单的更改:
- 将所有
easy_search_bar
替换为easy_search_bar_2
- 将所有
EasySearchBar
替换为EasySearchBar2
- 如果需要,可以迁移至新的泛型设置(
EasySearchBar2
接受一个泛型参数,并且可能需要提供名为suggestionToString
的参数)
基本示例
你可以创建一个带有建议列表的基本搜索栏示例如下:
import 'package:easy_search_bar_2/easy_search_bar_2.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyHomePage());
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String searchValue = '';
final List<String> _suggestions = [
'阿富汗',
'阿尔巴尼亚',
'阿尔及利亚',
'澳大利亚',
'巴西',
'德国',
'马达加斯加',
'莫桑比克',
'葡萄牙',
'赞比亚',
];
Future<List<String>> _fetchSuggestions(String searchValue) async {
await Future.delayed(const Duration(milliseconds: 750));
return _suggestions
.where(
(element) => element.toLowerCase().contains(searchValue.toLowerCase()),
)
.toList();
}
[@override](/user/override)
Widget build(BuildContext context) => MaterialApp(
title: '示例',
theme: ThemeData(primarySwatch: Colors.orange),
home: Scaffold(
appBar: EasySearchBar2(
title: const Text('示例'),
onSearch: (value) => setState(() => searchValue = value),
actions: [
IconButton(icon: const Icon(Icons.person), onPressed: () {}),
],
asyncSuggestions: (value) async => _fetchSuggestions(value),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('抽屉头部'),
),
ListTile(
title: const Text('项目1'),
onTap: () => Navigator.pop(context),
),
ListTile(
title: const Text('项目2'),
onTap: () => Navigator.pop(context),
),
],
),
),
body: Center(child: Text('值: $searchValue')),
),
);
}
更多关于Flutter搜索栏插件easy_search_bar_2的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter搜索栏插件easy_search_bar_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何使用Flutter插件easy_search_bar_2
的示例代码。这个插件可以帮助你快速集成一个功能强大的搜索栏到你的Flutter应用中。
首先,确保你的pubspec.yaml
文件中已经添加了easy_search_bar_2
依赖:
dependencies:
flutter:
sdk: flutter
easy_search_bar_2: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get
来安装依赖。
以下是一个简单的示例,展示如何在Flutter中使用easy_search_bar_2
插件:
import 'package:flutter/material.dart';
import 'package:easy_search_bar_2/easy_search_bar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Easy Search Bar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List<String> items = List.generate(100, (i) => "Item ${i + 1}");
String? searchQuery = "";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Easy Search Bar Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
EasySearchBar2(
hintText: 'Search...',
onChanged: (query) {
setState(() {
searchQuery = query;
});
// 可以在这里添加过滤逻辑,比如根据query更新显示的列表
// filteredItems = items.where((item) => item.contains(query)).toList();
},
leading: Icon(Icons.search),
trailing: IconButton(
icon: Icon(Icons.clear),
onPressed: () {
setState(() {
searchQuery = "";
// 如果有过滤后的列表,可以重置回原始列表
// filteredItems = [...items];
});
},
),
),
SizedBox(height: 16),
Expanded(
child: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
searchQuery == null || searchQuery!.isEmpty ||
items[index].contains(searchQuery!)
? items[index]
: '',
style: TextStyle(decoration: searchQuery != null &&
!searchQuery!.isEmpty &&
!items[index].contains(searchQuery!)
? TextDecoration.lineThrough
: TextDecoration.none),
),
),
),
),
],
),
),
);
}
}
在这个示例中,我们创建了一个简单的Flutter应用,包含一个搜索栏和一个列表。搜索栏使用EasySearchBar2
插件,当用户在搜索栏中输入文本时,onChanged
回调会被触发,从而更新searchQuery
状态。你可以根据searchQuery
的值来过滤列表项(在示例中,只是简单地通过文本包含关系来显示或隐藏列表项)。
注意:
EasySearchBar2
的onChanged
回调返回用户输入的搜索查询。leading
属性用于设置搜索栏左侧的图标(这里使用了一个搜索图标)。trailing
属性用于设置搜索栏右侧的图标(这里使用了一个清除图标,用于清空搜索查询)。
你可以根据需要进一步自定义和扩展这个示例,比如添加更多的过滤逻辑、动画效果等。