在打字时，我如何使Flutter搜索代码正常工作

Question

我似乎真的不知道我的代码出了什么问题。搜索功能似乎只有在我输入搜索查询并进行热重新加载后才能工作。我打字的时候它不能马上工作。我是不是错过了什么？是因为API有很多数据吗？

我已经包含了代码的所有相关部分，从模型到搜索函数。

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
class Search extends StatefulWidget {
@override
_SearchState createState() => new _SearchState();
}
class _SearchState extends State<Search> {
TextEditingController controller = new TextEditingController();

Future getUserDetails() async {
final response =
await http.get('http://makeup-api.herokuapp.com/api/v1/products.json');
final responseJson = json.decode(response.body);
setState(() {
for (Map user in responseJson) {
_userDetails.add(UserDetails.fromJson(user));
}
});
}
@override
void initState() {
super.initState();
getUserDetails();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Home'),
elevation: 0.0,
),
body: new Column(
children: <Widget>[
new Container(
color: Theme.of(context).primaryColor,
child: new Padding(
padding: const EdgeInsets.all(8.0),
child: new Card(
child: new ListTile(
leading: new Icon(Icons.search),
title: new TextField(
controller: controller,
decoration: new InputDecoration(
hintText: 'Search', border: InputBorder.none),
onChanged: onSearchTextChanged,
),
trailing: new IconButton(
icon: new Icon(Icons.cancel),
onPressed: () {
controller.clear();
onSearchTextChanged('');
},
),
),
),
),
),
new Expanded(
child: _searchResult.length != 0 || controller.text.isNotEmpty
? new ListView.builder(
itemCount: _searchResult.length,
itemBuilder: (context, i) {
return new Card(
child: new ListTile(
leading: new CircleAvatar(
backgroundImage: new NetworkImage(
_searchResult[i].imageLink
),
),
title: new Text(_searchResult[i].name +
' ' +
_searchResult[i].brand),
),
margin: const EdgeInsets.all(0.0),
);
},
)
: new ListView.builder(
itemCount: _userDetails.length,
itemBuilder: (context, index) {
return new Card(
child: new ListTile(
leading: new CircleAvatar(
backgroundImage: new NetworkImage(
_userDetails[index].imageLink,
),
),
title: new Text(_userDetails[index].name +
' ' +
_userDetails[index].brand),
),
margin: const EdgeInsets.all(0.0),
);
},
),
),
],
),
);
}
onSearchTextChanged(String text) async {
_searchResult.clear();
if (text.isEmpty) {
setState(() {});
return;
}
_userDetails.forEach((userDetail) {
if (userDetail.name.contains(text) ||
userDetail.brand.contains(text)) _searchResult.add(userDetail);
});
setState(() {});
}
}
List<UserDetails> _searchResult = [];
List<UserDetails> _userDetails = [];
final String url = 'http://makeup-api.herokuapp.com/api/v1/products.json';
class UserDetails {
final String name, brand, imageLink;
UserDetails({this.name, this.brand, this.imageLink = 'https://cdn.business2community.com/wp-content/uploads/2017/08/blank-profile-picture-973460_640.png'});
factory UserDetails.fromJson(Map<String, dynamic> json) {
return new UserDetails(
name: json['name'],
brand: json['brand'],
);
}
}

Answer 1

您应该用交换onChanged: onSearchTextChanged,

onChanged: (value) => onSearchTextChanged(value),