我有一个要从本地数据库中抓取的项目列表,并显示在列表中,当单击某个项目时,会出现一个底部的页面,用户可以在其中添加或从收藏夹列表中删除该项目,该功能可以正常工作,除了即使使用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 时,可以将StateSetterStatefulBuilder一起使用。

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/

10-12 00:31
查看更多