Flutter

Question

我有一个项目列表，我正在像这样从本地数据库中抓取并将它们显示在列表中，当单击一个项目时，底部 sheet 出现在用户可以添加或删除所述项目的地方从收藏夹列表中，该功能完美运行，除了带有图标和文本的 UI 部分不会改变状态（应该从 border_favorite 和 'add to favorites' 到 filled_favorite 和 'remove from favorites' 反之亦然）即使在使用 setState() 时 icon/text 保持不变，它们只会在我关闭底部 sheet 并再次打开它时发生变化。

问： 是什么导致了这种行为？我怎样才能修复这个错误？

这是底部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'),
                        ), 
                    ],
                ),
            );
        }
    );
}

Answer 1

显示底页时，您可以使用 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 - Bottomsheet 中的图标和文本未正确更新 UI

Flutter - Icon and text in Bottomsheet not updating the UI properly

setstate

dart

bottom-sheet