如何在 gridview 構建器中使收藏夾按鈕可點擊

Question

我在 gridview.builder 中有一個最喜歡的按鈕，但我希望當我單擊一個特別喜歡的按鈕（它變成紅色）而其他按鈕不會變成...因為當我單擊一個特別喜歡的按鈕時它會影響所有按鈕。 我需要有關如何解決它的幫助。

我是 flutter 的新手。我希望有人能指導我......我真的需要一個導師（請任何人）

class HomeItemsWidget extends StatefulWidget {
  const HomeItemsWidget({
    Key? key,
  }) : super(key: key);

  @override
  State<HomeItemsWidget> createState() => _HomeItemsWidgetState();
}

class _HomeItemsWidgetState extends State<HomeItemsWidget> {
  bool isIconView = false;
`your text`
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: gridImages.length,
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          mainAxisExtent: 231.5,
          crossAxisCount: 2),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          decoration: BoxDecoration(`your text`
            color: Appcolors.whiteColor,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Padding(
            padding: const EdgeInsets.only(left: 12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                IconButton(
                onPressed: () {
                  toggleIconView();
                },
                icon: Icon(isIconView ? Icons.favorite : Icons.favorite_border),
                color: isIconView ? Colors.red : Colors.red ,
                  ),
                Align(
                  alignment: Alignment.center,
                  child: Image.asset(
                    "${gridImages[index]["image"]}",
                    height: 70.0,
                  ),
                ),
                const SizedBox(height: 20.0),
                Text(
                  "${gridImages[index]["heading"]}",
                  style: GoogleFonts.poppins(
                      color: Appcolors.primaryColor,
                      fontSize: 12.0,
                      fontWeight: FontWeight.w500),
                ),
                const SizedBox(height: 4.0),
                Text(
                  "${gridImages[index]["title"]}",
                  style: GoogleFonts.poppins(
                      color: Appcolors.greyColor,
                      fontSize: 16.0,
                      fontWeight: FontWeight.w600),
                ),
                const SizedBox(height: 12.0),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      "${gridImages[index]["price"]}",
                      style: GoogleFonts.poppins(
                          color: Appcolors.darkGreyColor,
                          fontSize: 14.0,
                          fontWeight: FontWeight.w500),
                    ),
                 
              ],
            ),
          ),
        );
      },
    );
  }

  void toggleIconView() {
    setState(() {
      isIconView = !isIconView;
    });
  }
}

我想當我點擊一個特別喜歡的按鈕（它變成紅色）而其他人不會變成

Answer 1

您需要使用 List 來跟蹤 N 個項目。 你可以做

class _HomeItemsWidgetState extends State<HomeItemsWidget> {
  List<int> selectedItem = [];

並根據當前 state 獲取和設置顏色

IconButton(
  onPressed: () {
    toggleIconView(index);
  },
  icon: Icon(selectedItem.contains(index)
      ? Icons.favorite
      : Icons.favorite_border),
  color: selectedItem.contains(index) ? Colors.red : Colors.red,
),

切換選項將是

void toggleIconView(int index) {
  if (selectedItem.contains(index)) {
    selectedItem.remove(index);
  } else {
    selectedItem.add(index);
  }
  setState(() {});
}