Flutter中ListView.builder按钮同步切换：如何单独控制单个按钮？

问题根源很明确：你现在用了一个全局的isPlaying变量，所有列表项的按钮都绑定这个变量，所以点击任何一个按钮，所有按钮的状态都会同步切换。要实现单独控制，得给每个列表项分配独立的状态。

下面给两种实用的解决方案：

方案一：用列表存储每个项的播放状态 #

这种方式适合不想修改原有数据模型的场景：

1. 先在State类里定义一个和radioDetails长度一致的布尔列表，用来记录每个项的播放状态：

List<bool> _isPlayingList = [];

2. 在initState里初始化这个列表，默认所有项都是未播放状态：

@override
void initState() {
  super.initState();
  _isPlayingList = List.filled(radioDetails.length, false);
}

3. 修改列表项的按钮逻辑，只操作对应索引的状态，同时处理互斥播放（可选，比如播放一个电台时自动暂停其他）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("ListView.builder")),
    body: ListView.builder(
      itemCount: radioDetails.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          clipBehavior: Clip.antiAlias,
          child: ListTile(
            title: Text(radioDetails[index].name),
            trailing: IconButton(
              icon: Icon(
                _isPlayingList[index] ? Icons.stop : Icons.play_arrow,
              ),
              onPressed: () async {
                setState(() {
                  // 处理互斥：如果要播放当前项，先把所有其他项设为未播放
                  if (!_isPlayingList[index]) {
                    for (int i = 0; i < _isPlayingList.length; i++) {
                      _isPlayingList[i] = false;
                    }
                  }
                  // 切换当前项的状态
                  _isPlayingList[index] = !_isPlayingList[index];
                });

                if (_isPlayingList[index]) {
                  // 先暂停之前的音频，再播放当前的
                  await audioPause();
                  await audioPlay(radioDetails[index].url);
                } else {
                  await audioPause();
                }
              },
            ),
          ),
        );
      },
    ),
  );
}

方案二：给数据模型添加播放状态字段（更推荐） #

这种方式更面向对象，把每个电台的播放状态和自身数据绑定：

1. 修改你的RadioDetail模型类，添加isPlaying字段：

class RadioDetail {
  final String name;
  final String url;
  bool isPlaying; // 新增播放状态字段

  RadioDetail({
    required this.name,
    required this.url,
    this.isPlaying = false, // 默认未播放
  });
}

2. 修改列表项的按钮逻辑，直接操作对应项的isPlaying状态：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text("ListView.builder")),
    body: ListView.builder(
      itemCount: radioDetails.length,
      itemBuilder: (BuildContext context, int index) {
        final radio = radioDetails[index];
        return Card(
          clipBehavior: Clip.antiAlias,
          child: ListTile(
            title: Text(radio.name),
            trailing: IconButton(
              icon: Icon(
                radio.isPlaying ? Icons.stop : Icons.play_arrow,
              ),
              onPressed: () async {
                setState(() {
                  // 互斥处理：播放当前项时，暂停其他所有项
                  if (!radio.isPlaying) {
                    for (var r in radioDetails) {
                      r.isPlaying = false;
                    }
                  }
                  radio.isPlaying = !radio.isPlaying;
                });

                if (radio.isPlaying) {
                  await audioPause();
                  await audioPlay(radio.url);
                } else {
                  await audioPause();
                }
              },
            ),
          ),
        );
      },
    ),
  );
}

注意点 #

• 如果不需要互斥播放（允许同时播放多个电台），去掉循环设置其他项状态的代码即可。
• 音频播放逻辑里，记得处理暂停之前的音频，避免多个音频同时播放。

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