在ListView中显示搜索到的数据,需要以下步骤:
以下是一个示例代码,演示如何在ListView中显示搜索到的数据:
import 'package:flutter/material.dart';
class SearchListView extends StatefulWidget {
@override
_SearchListViewState createState() => _SearchListViewState();
}
class _SearchListViewState extends State<SearchListView> {
List<String> dataList = [
'Apple',
'Banana',
'Cherry',
'Durian',
'Grape',
'Lemon',
'Orange',
'Peach',
'Strawberry',
'Watermelon',
];
List<String> filteredList = [];
void filterData(String keyword) {
setState(() {
filteredList = dataList
.where((item) => item.toLowerCase().contains(keyword.toLowerCase()))
.toList();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Search ListView'),
),
body: Column(
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
onChanged: (value) => filterData(value),
decoration: InputDecoration(
labelText: 'Search',
),
),
),
Expanded(
child: ListView.builder(
itemCount: filteredList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(filteredList[index]),
);
},
),
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: SearchListView(),
));
}
在上述示例中,我们创建了一个SearchListView组件,其中包含一个TextField用于输入搜索关键字,以及一个ListView用于显示搜索结果。在用户输入搜索关键字时,我们通过filterData方法对数据源进行过滤,并更新filteredList,然后通过ListView.builder将过滤后的数据绑定到ListView上进行显示。
这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。关于ListView的更多用法和属性,可以参考腾讯云Flutter官方文档中的ListView部分:ListView - Flutter官方文档
领取专属 10元无门槛券
手把手带您无忧上云