Flutter中IconButton点击后颜色瞬消及批量切换问题求助

问题根源分析 #

1. 所有图标同步切换：你用了一个全局的ischecked变量，所有列表项的选中状态都依赖这个变量，点击任意一个图标都会改变这个全局变量，导致所有图标同步切换。
2. 选中状态短暂消失：一是FutureBuilder在build方法里直接调用fetchData，每次页面重建（比如调用setState）都会重新发起网络请求，列表被重新渲染；二是图标显示条件错误地同时依赖provider.isExist(fav)和全局的ischecked，两者冲突导致状态异常。

修复步骤及代码修改 #

1. 移除全局ischecked变量

删掉State类里的bool ischecked = false;，所有选中状态完全交给Provider管理。

2. 修复FutureBuilder的future参数

把FutureBuilder的future改成initState中初始化的futureFood，避免每次build都重复请求数据：

FutureBuilder<Food>(
  future: futureFood, // 替换成初始化好的future，而非每次build都调用fetchData
  builder: (context, snapshot) {
    // ... 原有逻辑
  },
)

3. 修改IconButton的判断逻辑

图标显示只需要根据Provider中是否存在当前项来判断，去掉对全局ischecked的依赖：

trailing: IconButton(
  icon: provider.isExist(fav)
      ? const Icon(Icons.favorite, color: Colors.red)
      : const Icon(Icons.favorite_border),
  onPressed: () {
    provider.toggleFavorite(fav);
    // 删掉setState调用，Provider会自动通知UI更新
  },
),

修改后的完整代码

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:note/Designs/Favorite_List.dart';
import 'package:note/Models/Favorite_List_Provider.dart';
import 'package:note/Models/Food_Models.dart';
import 'package:provider/provider.dart';

import '../Services/Fetch_Data.dart';
import 'Details_DesignOfDesignOne.dart';

class DesignOne extends StatefulWidget {
  const DesignOne({super.key, required this.Image, required this.Desc});
  final String Image;
  final String Desc;
  @override
  State<DesignOne> createState() => _DesignOneState();
}

class _DesignOneState extends State<DesignOne> {
  late Future<Food> futureFood;
  @override
  void initState() {
    super.initState();
    futureFood = fetchData(widget.Image, widget.Desc);
  }

  // 移除全局ischecked变量
  @override
  Widget build(BuildContext context) {
    final provider = favorite.of(context);
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      appBar: AppBar(
        title: Text('Design one'),
        actions: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: InkWell(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => FavoriteScreen(Desc: '', Image: ''),
                  ),
                );
              },
              child: Icon(
                Icons.list,
                size: 30,
              ),
            ),
          )
        ],
      ),
      body: Consumer<favorite>(
          builder: (BuildContext context, favorite value, child) {
        return Center(
          child: FutureBuilder<Food>(
            // 使用初始化好的futureFood，避免重复请求
            future: futureFood,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: snapshot.data!.categories.length,
                    itemBuilder: (contxt, index) {
                      final fav = snapshot.data!.categories[index];

                      return InkWell(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => DetailsDo(
                                Desc: snapshot.data!.categories[index]
                                    .strCategoryDescription,
                                Image: snapshot
                                    .data!.categories[index].strCategoryThumb,
                              ),
                            ),
                          );
                        },
                        child: Card(
                          elevation: 2,
                          shape: RoundedRectangleBorder(
                            side: BorderSide(color: Colors.white70, width: 1),
                            borderRadius: BorderRadius.circular(50),
                          ),
                          child: ListTile(
                            title: Text(
                              snapshot.data!.categories[index].strCategory
                                  .toString(),
                              style: GoogleFonts.montserrat(
                                fontSize: 20,
                                fontWeight: FontWeight.w600,
                                fontStyle: FontStyle.italic,
                              ),
                            ),
                            leading: CircleAvatar(
                              backgroundColor:
                                  Color.fromARGB(213, 255, 251, 251),
                              child: Text(
                                snapshot.data!.categories[index].idCategory
                                    .toString(),
                                style: GoogleFonts.montserrat(
                                    fontSize: 20,
                                    fontWeight: FontWeight.w600,
                                    fontStyle: FontStyle.italic,
                                    color: Color.fromARGB(255, 148, 148, 135)),
                              ),
                            ),
                            trailing: IconButton(
                              // 仅通过Provider判断选中状态
                              icon: provider.isExist(fav)
                                  ? const Icon(Icons.favorite, color: Colors.red)
                                  : const Icon(Icons.favorite_border),
                              onPressed: () {
                                provider.toggleFavorite(fav);
                                // 移除setState，Provider会自动通知UI更新
                              },
                            ),
                          ),
                        ),
                      );
                    });
              } else if (snapshot.hasError) {
                return Text('${snapshot.error}');
              }
              return const CircularProgressIndicator();
            },
          ),
        );
      }),
    );
  }
}

额外说明 #

• 确保你的favorite Provider类中的toggleFavorite和isExist方法逻辑正确，能准确添加/移除收藏项并判断是否存在。
• 使用Consumer包裹需要监听状态变化的UI部分，这样Provider状态变化时只会重建必要的组件，提升性能。

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