我是Flutter和应用程序开发的初学者。我有个问题。我正在使用Provider.of来获取数据。我正在获取数据并将其显示在ListView.builder中，没有问题。但是我想在清单上进行搜索。
请参考下面的代码
class RecipeList extends StatefulWidget {
@override
_RecipeListState createState() => _RecipeListState();
}
class _RecipeListState extends State<RecipeList> {
List<Recipe>showList =List();//creating my list of searched data
@override
Widget build(BuildContext context) {
//getting my recipe list in order to show them
final recipes = Provider.of<List<Recipe>>(context);
showList=recipes;
final user = Provider.of<User>(context);
String _image;
Widget myImage(int index,)
{
if(recipes[index].image == ''){
return Image.asset('images/no_image.jpg');
}
else{
return
FadeInImage.assetNetwork(
width: 300,
height: 250,
placeholder: 'images/loading.webp',
image: recipes[index].image,
);
}
}
return StreamBuilder<UserData>(
stream:DatabaseService(uid: user.uid).userData,
builder: (context,snapshot){
if(snapshot.hasData) {
UserData userdata = snapshot.data;
if (userdata.is_admin == true) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [Colors.blue[200], Colors.orange[100]])),
child: Scaffold(
appBar: AppBar(
title: Text('Recipes'),
backgroundColor: Colors.transparent,
elevation: 0,
),
backgroundColor: Colors.transparent,
body: Column(
children: <Widget>[
Material(
elevation: 0,
color: Colors.transparent,
child: TextField(
onChanged: (val) {
val = val.toLowerCase();
setState(() {
showList = recipes.where((recipe){
var title = recipe.name.toLowerCase();
return title.contains(val);
}).toList();
});
},
decoration: InputDecoration(
labelText: "Search",
hintText: "Search",
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(25.0)))),
),),
SizedBox(height: 15,),
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: showList.length,
itemBuilder: (context, index) {
if (recipes[index].image == null) {
String _image = 'images/new.png';
}
else {
_image = recipes[index].image;
}
// print(recipes[index].image);
return Column(
children: <Widget>[
SlimyCard(
color: Colors.teal[200],
width: 300,
topCardHeight: 350,
bottomCardHeight: 300,
borderRadius: 15,
topCardWidget: Column(
children: <Widget>[
Text(recipes[index].name[0]
.toUpperCase() +
recipes[index].name.substring(1),
style: TextStyle(
fontSize: 35,
color: Colors.white,
fontWeight: FontWeight.bold,
),),
ClipRRect(borderRadius: BorderRadius
.circular(25.0),
child: myImage(index)
),
// Image.network('https://www.bbcgoodfood.com/sites/default/files/recipe-collections/collection-image/2013/05/chorizo-mozarella-gnocchi-bake-cropped.jpg')),
],
),
bottomCardWidget: SingleChildScrollView(
child: Column(
children: <Widget>[
Text('Ingredients',
style: TextStyle(
fontSize: 25,
color: Colors.white
),),
SizedBox(height: 5,),
Text(recipes[index].ingredients,
style: TextStyle(
fontSize: 16
),),
SizedBox(height: 20,),
Text('Recipe',
style: TextStyle(
fontSize: 25
,
color: Colors.white
),),
SizedBox(height: 5,),
Text(recipes[index].recipe,
style: TextStyle(
fontSize: 16
),),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius
.circular(7.0),
//side: BorderSide(color: Colors.orange)
),
color: Color.fromRGBO(
233, 217, 108, 1),
onPressed: () async {
final CollectionReference recipecollection = Firestore
.instance.collection(
'recipe');
await recipecollection.document(
recipes[index].id).delete();
StorageReference firestoreStorageref = await FirebaseStorage
.instance
.getReferenceFromUrl(
recipes[index].image);
firestoreStorageref.delete();
},
child: Text(
'Delete'
),
)
],
),
),
slimeEnabled: false,
),
SizedBox(height: 25,)
],
);
},
)),
],
)
),
);
}
我想在搜索中显示此列表并进行修改。首先，我用提供者的数据填充它。
我已经创建了一个用于搜索的TextField onChanged方法，用于过滤键入的值并返回一个列表。当我在onChanged函数中打印时，它正在工作。
我正在用ListView显示我的列表，当我在showList函数中打印onChanged的大小时，它会过滤并给出正确的值，但是当我将其用于itemCount它永远不会改变
答案 0 :(得分：2)
您可以使用searchable_dropdown代替TextField。您可以为其分配列表，它将基于to字符串方法搜索列表，因此您必须覆盖它。
请引用依赖项的链接：https://pub.dev/packages/searchable_dropdown。