我有一个要从本地数据库中抓取的项目列表,并显示在列表中,当单击某个项目时,会出现一个底部的页面,用户可以在其中添加或从收藏夹列表中删除该项目,该功能可以正常工作,除了即使使用setState()
,带有图标和文本的UI部分的状态也不会更改(假定从border_favorite和“添加到收藏夹”更改为fill_favorite并从“从收藏夹删除”,反之亦然),它们的图标/文本保持不变当我关闭 Bottom Sheet 并再次将其重新打开时进行更改。
问:是什么原因导致此现象?以及如何解决此错误?
这是底部的代码:
//isBookmarked here is a field in the DB that I get elsewhere in the database
//that variable is working just fine the console log reports show that everything is in its place
//the problem is that the icon and title of the ListTile widget are not updating as they should
void trriggerBottomsheet(context, Word wrd) {
showModalBottomSheet(
context: context,
builder: (BuildContext buildCtx) {
return Container(
child: Wrap(
children: <Widget>[
ListTile(
onTap: () {
isBookmarked == true
? databaseHelper.removeFromFavorite(wrd.wordId)
: databaseHelper.addToFavorite(wrd.wordId);
setState(() {isBookmarked = !isBookmarked;});
},
leading: isBookmarked == true
? Icon(Icons.favorite, color: Colors.red[300],)
: Icon(Icons.favorite_border),
title: isBookmarked == true
? Text('remove from favorites')
: Text('add to favorites'),
),
],
),
);
}
);
}
最佳答案
显示 Bottom Sheet 时,可以将StateSetter
与StatefulBuilder
一起使用。
void trriggerBottomsheet(context, Word wrd){
showModalBottomSheet(){
context: context,
builder: (context){
return StatefulBuilder(
builder: (BuildContext ctx, StateSetter stateSetter){
return Container(
child: Wrap(
children: <Widget>[
ListTile(
onTap: () {
isBookmarked == true
? databaseHelper.removeFromFavorite(wrd.wordId)
: databaseHelper.addToFavorite(wrd.wordId);
stateSetter(() {
isBookmarked = !isBookmarked;
})
setState(() {
setState(() {
isBookmarked = !isBookmarked;
});
isBookmarked = !isBookmarked;
});
},
leading: isBookmarked == true
? Icon(Icons.favorite, color: Colors.red[300],)
: Icon(Icons.favorite_border),
title: isBookmarked == true
? Text('remove from favorites')
: Text('add to favorites'),
),
],
),
);
}
);
}
}
}
关于flutter - Flutter- Bottom Sheet 中的图标和文本无法正确更新UI,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/65226887/