如何在 Flutter 中创建一个赞按钮？

Question

这是我的自定义小部件

Widget productlist({@required String img, @required IconButton likebtn}) {
return Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
  elevation: 10.0,
  child: InkWell(
    onTap: () {},
    child: Container(
      height: 190.0,
      width: MediaQuery.of(context).size.width * 0.43,
      child: Stack(
        children: [
          Image(
            height: 95.0,
            width: 200.0,
            fit: BoxFit.fill,
            image: AssetImage(img),
          ),
          Positioned(
            top: 89.0,
            left: 115.0,
            child: likebtn,
          ),
          Positioned(
            top: 97.0,
            left: 5.0,
            child: Text(
              "Name",
              style: TextStyle(
                fontSize: 24.0,
              ),
            ),
          ),
          Positioned(
            top: 128.0,
            left: 5.0,
            child: Text(
              "Description",
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w600,
                color: Colors.grey,
              ),
            ),
          ),
        ],
      ),
    ),
  ),
);

}

现在我在我的身体里像这样调用这个自定义小部件..

productlist(
                img: "assets/images/demo6.png",
                likebtn: IconButton(
                  onPressed: () {
                    setState(() {
                      liked = !liked;
                    });
                  },
                  icon: Icon(liked
                      ? Icons.thumb_up_alt_outlined
                      : Icons.thumb_up_alt_rounded),
                ),
              ),
              productlist(
                img: "assets/images/demo7.png",
                likebtn: IconButton(
                  onPressed: () {
                    setState(() {
                      liked = !liked;
                    });
                  },
                  icon: Icon(liked
                      ? Icons.thumb_up_alt_outlined
                      : Icons.thumb_up_alt_rounded),
                ),
              ),

我已经声明了一个布尔值，所以我可以使用它，但是因为我对所有人都使用相同的布尔值，所以如果我在一个小部件中按下类似按钮，那么它也可以在其他小部件中使用。 例如，如果我喜欢一张照片，那么所有照片都会被喜欢。我是否必须为所有小部件声明不同的布尔值，比如列表？ 如果我有 100 个这样的小部件怎么办？ 在那种情况下，100 个布尔值将是混乱代码！

Answer 1

确保您所有的照片都有一个唯一的 ID ，然后为所有喜欢的照片创建一个列表

 List<String> likedPhotos = [];

照片图标

Icon: likedPhotos.contains(photo.id)? LikedIcon : UnLikedIcon

OnLikedPhotoTap

likedPhotos.add(photo.id)

OnUnlikePhotoTap

likedPhotos.remove(photo.id)

Answer 2

你是对的，在这种情况下，你需要 100 个 bool 值才能这样做，我想也需要 100 个 img 来存储。
事实上，我们可以通过另一种方式做到这一点：使用 List。
首先，创建一个 class 来保存数据：

class Product {
  String img;
  bool liked;

  Post({this.img, this.liked});
}

然后，使用列表来存储所有产品：

List<Product> list = [
  Product('assets/images/demo6.png', false),
  Product('assets/images/demo7.png', false),
  Product('assets/images/demo8.png', false)
]

最后，显示列表，我更喜欢使用 List.map：

list.map((item) => productlist(
                img: item.img,
                likebtn: IconButton(
                  onPressed: () {
                    setState(() {
                      item.liked = !item.liked;
                    });
                  },
                  icon: Icon(item.liked
                      ? Icons.thumb_up_alt_outlined
                      : Icons.thumb_up_alt_rounded),
                ),
              )
)