在Flutter中,可以使用搜索来过滤和查找应用程序内部信息的列表。以下是在Flutter中实现搜索的步骤:
以下是一个简单的示例代码,演示如何在Flutter中实现搜索功能:
import 'package:flutter/material.dart';
class MySearchApp extends StatefulWidget {
@override
_MySearchAppState createState() => _MySearchAppState();
}
class _MySearchAppState extends State<MySearchApp> {
List<String> dataList = [
"Apple",
"Banana",
"Cherry",
"Durian",
"Grape",
"Lemon",
"Mango",
"Orange",
"Peach",
"Strawberry",
];
List<String> filteredList = [];
void filterSearchResults(String query) {
if (query.isNotEmpty) {
List<String> tempList = [];
dataList.forEach((item) {
if (item.toLowerCase().contains(query.toLowerCase())) {
tempList.add(item);
}
});
setState(() {
filteredList.clear();
filteredList.addAll(tempList);
});
return;
} else {
setState(() {
filteredList.clear();
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Search App"),
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
onChanged: (value) {
filterSearchResults(value);
},
decoration: InputDecoration(
labelText: "Search",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(25.0),
),
),
),
),
),
Expanded(
child: ListView.builder(
itemCount: filteredList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(filteredList[index]),
);
},
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: MySearchApp(),
));
}
在这个示例中,我们创建了一个名为MySearchApp
的有状态组件。组件的dataList
列表包含了一些水果的名称。我们使用filteredList
列表来存储过滤后的搜索结果。
通过监听搜索框中的文本变化,我们调用filterSearchResults
方法来过滤数据列表。在filterSearchResults
方法中,我们遍历dataList
,并将包含搜索关键字的项添加到tempList
中。最后,我们使用setState
来更新filteredList
的值,以便重新渲染搜索结果。
在构建方法中,我们使用TextField
来创建搜索栏,并将onChanged
回调与filterSearchResults
方法关联。使用ListView.builder
来构建列表视图,并根据过滤后的结果动态创建列表项。
你可以根据自己的需求修改和扩展这个示例,例如从数据库或网络中获取数据,使用自定义列表项等。
对应腾讯云的相关产品和文档:
领取专属 10元无门槛券
手把手带您无忧上云