Flutter/Dart：如何选中ListView内指定Card并切换图标颜色（白色转绿色）

我来帮你搞定这个问题！你当前遇到的核心问题是所有卡片共享了同一个cardColor状态变量，所以点击任何一张卡片都会触发全局状态更新，导致所有复选框同步变色。我们需要让每个卡片拥有独立的选中状态，这样就能单独控制对应图标的颜色了。下面提供两种解决方案，你可以根据需求选择：

方案一：让每个Card独立管理选中状态 #

这个方案最简单，适合不需要父组件跟踪选中状态的场景，每个卡片自己维护是否选中的状态：

修改myCard组件代码 #

class myCard extends StatefulWidget {
  const myCard({
    required this.tapsCount,
    required this.fileName,
    required this.displayName,
    this.onTap, // 可选：用于通知父组件处理点击次数等额外逻辑
    super.key,
  });
  
  final int? tapsCount;
  final String? fileName;
  final String? displayName;
  final Function()? onTap;

  @override
  _myCardState createState() => _myCardState();
}

class _myCardState extends State<myCard> {
  // 每个卡片单独维护选中状态
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 切换当前卡片的选中状态
        setState(() => _isSelected = !_isSelected);
        // 如果需要更新点击次数，调用父组件传入的回调
        widget.onTap?.call();
      },
      child: Card(
        child: Row(
          children: <Widget>[
            Expanded(
              child: Image.asset(
                widget.fileName!,
                height: 100.0,
                width: 100.0,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 32.0),
              child: Text(widget.displayName!),
            ),
            const SizedBox(width: 15.0),
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Text(widget.tapsCount!.toString()),
            ),
            // 根据选中状态动态切换图标颜色
            Icon(FontAwesomeIcons.check, color: _isSelected ? Colors.green : Colors.white),
            const SizedBox(width: 200.0),
          ],
        ),
      ),
    );
  }
}

修改Main部分代码 #

删掉全局的cardColor变量，简化ListView.builder中的卡片调用：

return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: ListView.builder(
      itemCount: widget._passoverCol.keys.length,
      itemBuilder: (BuildContext context, int index) {
        final currentKey = widget._passoverCol.keys.elementAt(index);
        final currentValue = widget._passoverCol.values.elementAt(index);
        
        return Container(
          height: 100,
          padding: const EdgeInsets.all(8.0),
          child: Stack(
            children: <Widget>[
              myCard(
                fileName: currentKey,
                displayName: currentValue.displayName,
                tapsCount: currentValue.tapsCount,
                onTap: () {
                  setState(() {
                    // 在这里处理点击次数更新逻辑，例如：
                    // currentValue.tapsCount += 1;
                    // 注意：如果你的数据模型是不可变的，需要用copyWith创建新对象
                  });
                },
              ),
            ],
          ),
        );
      },
    ),
  ),
);

方案二：父组件统一管理选中状态 #

如果需要父组件掌握所有卡片的选中状态（比如批量操作场景），可以让父组件维护一个选中键的集合，卡片根据自身key是否在集合中来决定颜色：

修改myCard为无状态组件 #

class myCard extends StatelessWidget {
  const myCard({
    required this.tapsCount,
    required this.fileName,
    required this.displayName,
    required this.isSelected,
    required this.onTap,
    super.key,
  });
  
  final int? tapsCount;
  final String? fileName;
  final String? displayName;
  final bool isSelected;
  final Function() onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Card(
        child: Row(
          children: <Widget>[
            Expanded(
              child: Image.asset(
                widget.fileName!,
                height: 100.0,
                width: 100.0,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 32.0),
              child: Text(widget.displayName!),
            ),
            const SizedBox(width: 15.0),
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Text(widget.tapsCount!.toString()),
            ),
            Icon(FontAwesomeIcons.check, color: isSelected ? Colors.green : Colors.white),
            const SizedBox(width: 200.0),
          ],
        ),
      ),
    );
  }
}

修改Main部分代码 #

在父组件的State类中添加选中集合，并更新ListView.builder：

// 在父组件的State类中定义：
Set<String> _selectedCardKeys = {};

// 然后构建ListView：
return Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: ListView.builder(
      itemCount: widget._passoverCol.keys.length,
      itemBuilder: (BuildContext context, int index) {
        final currentKey = widget._passoverCol.keys.elementAt(index);
        final currentValue = widget._passoverCol.values.elementAt(index);
        final isSelected = _selectedCardKeys.contains(currentKey);
        
        return Container(
          height: 100,
          padding: const EdgeInsets.all(8.0),
          child: Stack(
            children: <Widget>[
              myCard(
                fileName: currentKey,
                displayName: currentValue.displayName,
                tapsCount: currentValue.tapsCount,
                isSelected: isSelected,
                onTap: () {
                  setState(() {
                    // 更新选中集合
                    if (isSelected) {
                      _selectedCardKeys.remove(currentKey);
                    } else {
                      _selectedCardKeys.add(currentKey);
                    }
                    // 同时更新点击次数
                    // currentValue.tapsCount += 1;
                  });
                },
              ),
            ],
          ),
        );
      },
    ),
  ),
);

两种方案的区别 #

• 方案一：每个卡片独立管理状态，代码更简洁，适合不需要全局跟踪选中状态的场景。
• 方案二：父组件统一管理所有选中状态，适合需要批量操作（比如全选、批量删除）的场景。

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