Flutter在颤振搜索过滤器没有结果时如何显示消息

Question

我使用TextFormField来过滤使用GridView来显示项目的列表数组。在我的TextFormField里面，我使用了onChanged: onSearchTextChanged,，它通过我在json中创建的Rest API的数组响应过滤。过滤器工作得很好，但我正在寻找一种方法，当用户输入过滤器内不可用的过滤器时，显示没有结果。下面是我的代码:

TextFormField如下:

TextFormField(
controller: controller,
keyboardType: TextInputType.text,
onChanged: onSearchTextChanged,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixText: ' ',
hintText: "Search",
hintStyle: TextStyle(
color: Colors.grey,fontWeight: FontWeight.normal,
fontSize: 15,
fontFamily:
'Montserrat'),
prefixIcon: Container(
child:Icon(
Icons.search,
color: Colors.grey,
size: 20,
)),
suffixIcon: backClear==true?InkWell(
onTap: () {
controller.clear();
onSearchTextChanged(
'');
},
child: Container(
child:Icon(
Icons.backspace,
color: Colors.grey,
size: 12,
))): Container(
child:Icon(
Icons.view_list_rounded,
color: Colors.grey,
size: 15,
)),

labelStyle: new TextStyle(color: Colors.grey),
),
)

onSearchTextChanged如下:

onSearchTextChanged(String text) async {
_searchResult.clear();
if (text.isEmpty) {
setState(() {
backClear=false;
});
return;
}
content.forEach((userDetail) {
if (userDetail.username.toLowerCase().contains(text) || userDetail.username.toString().contains(text) ||
userDetail.username.toUpperCase().contains(text)||userDetail.fullname.toLowerCase().contains(text) || userDetail.fullname.toString().contains(text) ||
userDetail.fullname.toUpperCase().contains(text)||userDetail.phone.toLowerCase().contains(text) || userDetail.phone.toString().contains(text) ||
userDetail.phone.toUpperCase().contains(text)||userDetail.email.toLowerCase().contains(text) || userDetail.email.toString().contains(text) ||
userDetail.email.toUpperCase().contains(text) ) {
_searchResult.add(userDetail);
}
});
setState(() {
backClear=true;

});

}

例如，如果John不是username, fullname的返回数组列表的一部分，那么在屏幕上应该显示一条消息，说not found。

我的gridview如下:

Container(
child: _searchResult.length != 0 ||
controller.text.isNotEmpty
?new GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: _searchResult == null ? 0 : _searchResult.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3),
itemBuilder: (BuildContext context, int index){
return Card(
elevation: 1,
semanticContainer: true,
child:InkWell(
onTap: () async {

},
child: Container(
padding: EdgeInsets.all(10),
child:Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.bottomCenter,
children: [
CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: _searchResult[index].profile_img!=null?Container(
padding: EdgeInsets.all(0),
child:CircleAvatar(
radius: 40,
backgroundImage:NetworkImage(_searchResult[index].profile_img
,),
backgroundColor: Colors.white,
//
)):Container(
padding: EdgeInsets.all(0),
child:CircleAvatar(
radius: 40,
backgroundImage:AssetImage('assets/person_icon.png'),
backgroundColor: Colors.white,
//
)),
),
],),

Flexible(
child:   Center(child: Text(_searchResult[index].username==null?"AppName":_searchResult[index].username,style: TextStyle(
color: colorBlack,
fontWeight: FontWeight.normal,
fontSize: 10,
fontFamily: 'Montserrat',
),))),

Flexible(
child:   Container(
padding: EdgeInsets.only(left: 15,right: 15,top: 1,bottom: 1),
decoration: BoxDecoration(
color: colorBlue,borderRadius: BorderRadius.circular(3)),
child: Text( "Follow",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 10,
fontFamily: 'Montserrat',
),
),
),)
],
),
),
]))));
;})
:GridView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: content == null ? 0 : content.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount:3),
itemBuilder: (BuildContext context, int index){
return Card(
elevation: 1,
semanticContainer: true,
child:InkWell(
onTap: () async {

},
child: Container(
padding: EdgeInsets.all(10),
child:Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Flexible(
child: Column(
children: <Widget>[
Stack(
alignment: Alignment.bottomCenter,
children: [
CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: content[index].profile_img!=null?Container(
padding: EdgeInsets.all(0),
child:CircleAvatar(
radius: 40,
backgroundImage:NetworkImage(content[index].profile_img
,),
backgroundColor: Colors.white,
//
)):Container(
padding: EdgeInsets.all(0),
child:CircleAvatar(
radius: 40,
backgroundImage:AssetImage('assets/person_icon.png'),
backgroundColor: Colors.white,
//
)),
),
],),

Flexible(
child:   Center(child: Text(content[index].username==null?"AppName":content[index].username,style: TextStyle(
color: colorBlack,
fontWeight: FontWeight.normal,
fontSize: 10,
fontFamily: 'Montserrat',
),))),

Flexible(
child:   Container(
padding: EdgeInsets.only(left: 15,right: 15,top: 1,bottom: 1),
decoration: BoxDecoration(
color: colorBlue,borderRadius: BorderRadius.circular(3)),
child: Text( "Follow",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 10,
fontFamily: 'Montserrat',
),
),
),)
],
),
),
]))));}))

Answer 1

我不确定您在示例代码中实际显示结果的位置，但是您可以实现的逻辑如下。在forEach之后，您应该检查是否确实找到了一些结果，如果没有，则将showNotFoundText设置为true，以便在视图中显示消息。

onSearchTextChanged(String text) async {
_searchResult.clear();
if (text.isEmpty) {
setState(() {
backClear=false;
showNotFoundText = false;
});
return;
}
content.forEach((userDetail) {
if (userDetail.username.toLowerCase().contains(text) || userDetail.username.toString().contains(text) ||
userDetail.username.toUpperCase().contains(text)||userDetail.fullname.toLowerCase().contains(text) || userDetail.fullname.toString().contains(text) ||
userDetail.fullname.toUpperCase().contains(text)||userDetail.phone.toLowerCase().contains(text) || userDetail.phone.toString().contains(text) ||
userDetail.phone.toUpperCase().contains(text)||userDetail.email.toLowerCase().contains(text) || userDetail.email.toString().contains(text) ||
userDetail.email.toUpperCase().contains(text) ) {
_searchResult.add(userDetail);
}
});
if (_searchResult.isEmpty) {
//Do something
setState(() {
showNotFoundText = true;
});
}
setState(() {
backClear=true;
});
}

在视图中添加如下内容

showNotFoundText ? Text("No results found") : Container() //Empty container instead

由于没有包含结果显示的代码，所以我这样做了，但您也可以考虑直接在视图中使用此逻辑:

_searchResult.isEmpty ? Text("No results found") : DisplayResultsWidget()

Answer 2

根据Dani3le_的建议，在我的onSearchTextChanged中使用add下面的if语句，我在我的代码上面声明了我的bool showNotFoundText = false;

if (_searchResult.isEmpty) {
//Do something
setState(() {
showNotFoundText = true;
});
}

和我的Gridview上面，我添加了下面的代码来显示No result message下面的代码:

showNotFoundText==true ? Text("No result found!",style: TextStyle(fontFamily: 'Montserrat',color: Colors.grey, fontSize: 13, fontWeight: FontWeight.bold),) : Container(),

但是退格的onPress,No result found仍然显示，即使输入在搜索列表中可用，所以我将showNotFoundText = false;添加到setState()，以便每次按下退格键时，它将showNotFoundText的状态设置回false，如下所示:

setState(() {
showNotFoundText = false;
});