flutter - 在 ListView 中使用具有共享首选项的“收藏夹”按钮

Question

当我单击它并单击列表中的所有项目时，我在列表 View 中有“收藏夹”按钮，我如何使用共享首选项修复此问题，这是我的代码:
在我的stfl状态下:

  static const likedKey = 'liked_key';

  bool liked;

  @override
  void initState() {
    super.initState();
    _restorePersistedPreference();
  }

  void _restorePersistedPreference() async {
    var preferences = await SharedPreferences.getInstance();
    var liked = preferences.getBool(likedKey) ?? false;
    setState(() => this.liked = liked);
  }

  void _persistPreference() async {
    setState(() => liked = !liked);
    var preferences = await SharedPreferences.getInstance();
    preferences.setBool(likedKey, liked);
  }

我的LikeButton代码:

IconButton(
                icon: Icon(
                  liked ? Icons.favorite : Icons.favorite_border,
                  color: liked ? Colors.red : Colors.grey,
                ),
                onPressed: _persistPreference,
              ),

Answer 1

您可以通过生成List<bool>解决问题。由于按下IconButton会更改“喜欢”的值，因此所有图标都将成为Icons.favorite，因为它们都引用了您喜欢的同一个bool。这是有关如何解决此问题的示例:

  @override
  Widget build(BuildContext context) {
   List<bool> likedList=[];
   List<bool>.generate(yourItem.length, (i) => likedList.add(false);
   return ListView.builder(
    itemcount:yourItem.length,
    itemBuilder:(BuildContext context,int index){
     return IconButton(
             icon: Icon(
                      likedList[index] ? Icons.favorite : Icons.favorite_border,
                      color: likedList[index] ? Colors.red : Colors.grey,
             ),
             onPressed:()=> likedList[index]=!likedList[index], //toggle bool value
       );
     }
    )