Flutter：点击ListTile时如何仅切换对应项的图标为Icons.done

问题分析 #

你当前的代码存在两个核心问题：一是searchResult定义为字符串数组，但后续代码尝试通过searchResult[index]['username']访问对象属性，这会直接报错；二是没有为每个列表项单独维护选中状态，导致无法通过setState实现单个图标的切换。

解决方案 #

1. 修正数据结构，添加状态字段

将searchResult改为包含用户信息和选中状态的对象列表（这里用Map示例，复杂项目建议用自定义类）：

// 初始化带选中状态的用户列表
List<Map<String, dynamic>> searchResult = [
  {'username': 'john', 'email': 'john@example.com', 'isAdded': false},
  {'username': 'doe', 'email': 'doe@example.com', 'isAdded': false},
  {'username': 'smith', 'email': 'smith@example.com', 'isAdded': false},
];

2. 动态切换图标并更新状态

在GestureDetector的onTap回调中，通过setState修改当前项的isAdded状态，同时根据该状态显示对应图标：

trailing: GestureDetector(
  onTap: () {
    setState(() {
      // 切换当前项的选中状态
      searchResult[index]['isAdded'] = !searchResult[index]['isAdded'];
    });
  },
  // 根据isAdded状态显示对应图标
  child: Icon(
    searchResult[index]['isAdded'] ? Icons.done : Icons.add_circle_outline,
    color: searchResult[index]['isAdded'] ? Colors.green : null,
  ),
),

完整修正代码 #

Expanded(
  child: Container(
    width: ScreenSize.screenWidth,
    child: Center(
      child: searchResult.isEmpty
          ? const Text("Oops! Looks like you have no friends at the moment.")
          : ListView.builder(
              itemCount: searchResult.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(searchResult[index]['username']),
                  subtitle: Text(searchResult[index]['email']),
                  trailing: GestureDetector(
                    onTap: () {
                      setState(() {
                        searchResult[index]['isAdded'] = !searchResult[index]['isAdded'];
                      });
                    },
                    child: Icon(
                      searchResult[index]['isAdded']
                          ? Icons.done
                          : Icons.add_circle_outline,
                      color: searchResult[index]['isAdded'] ? Colors.green : null,
                    ),
                  ),
                );
              },
            ),
    ),
  ),
),

补充说明 #

• 每个列表项的状态通过isAdded字段单独维护，setState仅触发对应项的UI刷新，不会重绘整个列表。
• 如果项目规模较大，推荐创建User类替代Map，代码可读性和可维护性会更好：

  class User {
    final String username;
    final String email;
    bool isAdded;
  
    User({required this.username, required this.email, this.isAdded = false});
  }
  

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