Flutter中实现GridView.Builder单个收藏按钮独立点击变色

问题原因 #

你当前用了一个全局的isIconView布尔变量控制所有收藏按钮的状态，所有网格项都绑定同一个状态值，所以点击任意按钮时，所有按钮都会同步切换。

修复代码 #

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

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

class _HomeItemsWidgetState extends State<HomeItemsWidget> {
  // 用List<bool>存储每个网格项的收藏状态，每个元素对应一个item
  late List<bool> favoriteStates;

  @override
  void initState() {
    super.initState();
    // 初始化所有状态为未收藏（false）
    favoriteStates = List.generate(gridImages.length, (_) => false);
  }

  @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(
            color: Appcolors.whiteColor,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Padding(
            padding: const EdgeInsets.only(left: 12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                IconButton(
                  onPressed: () {
                    // 点击时切换对应index的收藏状态
                    toggleFavorite(index);
                  },
                  // 根据当前index的状态显示对应图标
                  icon: Icon(favoriteStates[index] ? Icons.favorite : Icons.favorite_border),
                  // 未收藏时用灰色区分状态（可选调整）
                  color: favoriteStates[index] ? Colors.red : Colors.grey,
                ),
                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 toggleFavorite(int index) {
    setState(() {
      // 切换对应index的状态
      favoriteStates[index] = !favoriteStates[index];
    });
  }
}

关键修改点 #

• 把单个bool isIconView替换为List<bool> favoriteStates，每个元素对应一个网格项的收藏状态
• 在initState里初始化列表，长度和gridImages一致，默认都是未收藏状态
• 修改toggleFavorite方法，接收index参数，只切换对应位置的状态
• 按钮的图标和颜色绑定当前index对应的favoriteStates值，实现独立控制

关于寻找Flutter导师的建议 #

• 可以在本地Flutter开发者社群、技术交流群里发帖求助，很多有经验的开发者愿意提供指导
• 也可以在技术学习平台上筛选专注Flutter的导师，沟通时准备好你的项目场景、具体问题和学习目标，能让指导更高效

内容的提问来源于stack exchange，提问作者Martins