Flutter问题：点击ListTile内IconButton时所有按钮变色，需仅修改单个按钮

问题根源 #

你当前用全局变量_likeIcon控制所有IconButton的颜色，导致点击任何一个按钮时，所有按钮都会同步变色。要实现单个按钮独立变色，需要给每个评论项单独维护点赞状态。

解决方案步骤 #

1. 给每条评论添加独立状态：在评论数据中新增isLiked字段，标记该条评论是否被点赞；
2. 绑定状态到按钮颜色：IconButton的颜色根据当前项的isLiked值动态切换；
3. 点击仅修改当前项状态：点击按钮时，只更新当前评论的isLiked值，而非全局变量。

修改后的完整代码 #

import 'package:comment_box/comment/comment.dart';
import 'package:flutter/material.dart';
import 'package:peta/api_storage/storage.dart';

class CommentPage extends StatefulWidget {
  final String? img;
  const CommentPage(this.img, {Key? key}) : super(key: key);

  @override
  State<CommentPage> createState() => CommentPageState();
}

class CommentPageState extends State<CommentPage> {
  final formKey = GlobalKey<FormState>();
  final TextEditingController commentController = TextEditingController();

  // 初始化时给现有评论添加点赞状态字段
  @override
  void initState() {
    super.initState();
    for (var comment in postcomments) {
      comment.putIfAbsent('isLiked', () => false);
    }
  }

  Widget commentChild(data) {
    return ListView(
      children: [
        Image(
          image: NetworkImage(widget.img.toString()),
        ),
        for (var i = 0; i < data.length; i++)
          Padding(
            padding: const EdgeInsets.fromLTRB(2.0, 8.0, 2.0, 0.0),
            child: ListTile(
              isThreeLine: true,
              leading: GestureDetector(
                onTap: () async {
                  print("Comment Clicked");
                },
                child: Container(
                  height: 50.0,
                  width: 50.0,
                  decoration: new BoxDecoration(
                      color: Colors.blue,
                      borderRadius: new BorderRadius.all(Radius.circular(50))),
                  child: CircleAvatar(
                      radius: 50,
                      backgroundImage: CommentBox.commentImageParser(
                          imageURLorPath: data[i]['pic'])),
                ),
              ),
              title: Text(
                data[i]['name'],
                style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    data[i]['message'],
                    style: TextStyle(color: Colors.white, fontSize: 13),
                  ),
                  SizedBox(height: 9),
                  Row(
                    children: [
                      Text(data[i]['date'],
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                            fontWeight: FontWeight.bold,
                          )),
                      SizedBox(width: 13),
                      Text(
                        data[i]['likes'],
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.grey,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(width: 13),
                      Text(
                        'Reply',
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.grey,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(width: 13),
                      Text(
                        'Send',
                        style: TextStyle(
                          fontSize: 12,
                          color: Colors.grey,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  )
                ],
              ),
              trailing: IconButton(
                // 根据当前评论的点赞状态设置按钮颜色
                color: data[i]['isLiked'] ? Colors.red : Colors.grey,
                highlightColor: Colors.red,
                iconSize: 18,
                icon: Icon(
                  data[i]['icon']
                  //Icons.favorite,
                ),
                onPressed: () {
                  setState(() {
                    // 仅切换当前评论的点赞状态
                    data[i]['isLiked'] = !data[i]['isLiked'];
                    // 同步更新点赞数（可选）
                    int currentLikes = int.parse(data[i]['likes'] ?? '0');
                    data[i]['likes'] = data[i]['isLiked'] 
                        ? (currentLikes + 1).toString() 
                        : (currentLikes - 1).toString();
                  });
                },
              ),
            ),
          ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Comment Page"),
        backgroundColor: Colors.black,
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/BG/PetaBG.png'),
                fit: BoxFit.cover,
                colorFilter: ColorFilter.mode(
                  Color.fromARGB(120, 0, 0, 0),
                  BlendMode.darken,
                ))),
        child: CommentBox(
          userImage: CommentBox.commentImageParser(
              imageURLorPath: "assets/images/dog1.jpg"),
          child: commentChild(postcomments),
          labelText: 'Write a comment...',
          errorText: 'Comment cannot be blank',
          withBorder: false,
          sendButtonMethod: () {
            if (formKey.currentState!.validate()) {
              print(commentController.text);
              setState(() {
                var value = {
                  'name': 'New User',
                  'pic': 'assets/images/dog1.jpg',
                  'message': commentController.text,
                  'date': '1s',
                  'likes': '0',
                  'isLiked': false, // 新评论默认未点赞
                };
                postcomments.insert(0, value);
              });
              commentController.clear();
              FocusScope.of(context).unfocus();
            } else {
              print("Not validated");
            }
          },
          formKey: formKey,
          commentController: commentController,
          backgroundColor: Colors.blue,
          textColor: Colors.white,
          sendWidget: Text(
            'Post',
            style: TextStyle(color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

核心修改点 #

• 移除了全局的_likeIcon变量，改用每条评论自带的isLiked字段控制颜色；
• initState中给现有评论补全isLiked初始值；
• 新增评论时默认设置isLiked: false，保证状态统一；
• 点击按钮仅修改当前评论的状态，实现独立变色效果。

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