listview - 如何在颤动的AlertDialog中过滤ListView中的数据?
问题描述
我在带有搜索(过滤器)的警报对话框中有 ListView。在正常屏幕中,使用列表进行搜索是有效的,但是当我在 AlertDialog 中添加时它不起作用。下面是我的代码,
return new AlertDialog(
contentPadding: EdgeInsets.all(0.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5.0))),
content: Container(
width: screenSize.width * 0.9,
height: screenSize.height * 0.5,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Container(
width: screenSize.width,
height: 40,
padding: EdgeInsets.only(left: 10, right: 10),
color: const Color(colorPrimary),
child: Align(
child: Text("Scanned Serial Number",
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w500,
fontFamily: 'helvetica',
color: Colors.white)),
alignment: Alignment.centerLeft,
),
),
Container(
color: Color(colorAccent),
padding: EdgeInsets.all(10),
child: new Container(
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(7)),
color: Colors.white),
child: new Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: Padding(
padding: EdgeInsets.only(left: 10),
child: new TextField(
controller:_search_controller,
decoration: new InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(color: Colors.grey),
hintText: "Search Label",
counterText: "",
),
onChanged: (value) {
filterSearchResults(value);
},
maxLines: 1,
maxLength: 50,
),
),
flex: 1,
),
Flexible(
child: IconButton(
onPressed: () {},
icon: Icon(
Icons.search,
color: const Color(colorPrimary),
)),
flex: 0,
)
],
),
),
),
Expanded(
child: widget.listStickerDisplay.length > 0
? new Container(
child: ListView.builder(
itemCount: widget.listStickerDisplay.length,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return new Column(
children: <Widget>[
Container(
height: 35,
width: screenSize.width,
child: Align(
alignment: Alignment.center,
child: Text(
"#" +
listStickerDisplay[index]
.intRowNo
.toString() +
" " +
listStickerDisplay[index]
.varSticker,
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w400,
fontFamily: 'helvetica',
)),
),
),
Container(
width: screenSize.width,
color: Colors.black12,
height: 1,
),
],
);
},
),
)
: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
"assets/nodata_icon.png",
height: 100,
width: 100,
),
Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"No Data Found",
style: prifixTxtStyle,
),
),
],
),
),
flex: 1,
),
Container(
width: screenSize.width,
height: 45,
child: Row(
children: <Widget>[
Expanded(
child: ButtonDialogWidgets(
buttonName: 'Close',
buttonColor: const Color(colorPrimary),
textColor: Colors.white,
onTap: () {
Navigator.of(context).pop();
},
),
flex: 1,
),
],
),
),
],
),
)
);
下面是过滤功能:
void filterSearchResults(String query) {
List<SalesSummarySKUStickerModel> dummySearchList =
List<SalesSummarySKUStickerModel>();
dummySearchList.addAll(widget.listSticker);
if (query.isNotEmpty) {
query = query.toLowerCase();
List<SalesSummarySKUStickerModel> dummyListData =
List<SalesSummarySKUStickerModel>();
dummySearchList.forEach((item) {
if (item.varSticker.toLowerCase().contains(query)) {
dummyListData.add(item);
}
});
if (mounted)
setState(() {
listStickerDisplay.clear();
listStickerDisplay.addAll(dummyListData);
});
} else {
if (mounted)
setState(() {
listStickerDisplay.clear();
listStickerDisplay.addAll(widget.listSticker);
});
}
}
解决方案
为您的对话框创建另一个有状态的小部件。阅读本文以进一步了解。
推荐阅读
- sql - SQL Server DATEDIFF 对 YEAR 差值进行四舍五入。如何四舍五入?
- javascript - Javascript 对象,返回包含嵌套数组中的值的更新对象
- r - grDevices::dev.new() 第一次不起作用
- vue.js - 带有 imagemin webpack 插件的 Vue cli 3
- sql - 大于或小于一个数量
- ms-access - 通过访问表单上的按钮将费用记录复制到发票详细信息
- java - Spring Integration 从 REST 服务获取分页结果
- javascript - 查找最大匹配计数
- r - 使用 ggplot scale_x_yearmon 缺少 yearmon 标签
- sql - SSIS 中的 Google Analytics/Adwords 数据?