如何制作Flutter中独特按钮的Listview？

Question

我正在开发一个创建录音列表的应用程序。 对于每个录音，我希望应用程序生成不同的界面来录制和播放音频，某种形式可以保留录音的名称和唯一 ID。 看起来像这样

不幸的是，当我按下其中一个录音的播放按钮时，所有录音的每个播放按钮都会从 Icons.play 切换到 Icons.stop。 我只想要更改图标所需的按钮，我尝试使用 Keys 和 GlobalKeys 但没有成功。

audioForm 的代码如下所示

  _audioForm(double screenWidth, double screenHeight, recordi) => Padding(
        padding: const EdgeInsets.only(top: 12.0),
        child: Row(
          children: [
            SizedBox(
              height: screenHeight / 9,
              width: screenWidth * (2 / 10),
              child: TextField(
                style: TextStyle(
                  fontSize: 24.0,
                ),
                decoration: InputDecoration(
                    border: OutlineInputBorder(), hintText: 'Key'),
              ),
            ),
            SizedBox(
              height: screenHeight / 9,
              width: screenWidth * (5 / 10),
              child: TextField(
                style: TextStyle(fontSize: 24.0),
                decoration: InputDecoration(
                    border: OutlineInputBorder(), hintText: 'Name'),
              ),
            ),
            SizedBox(
              width: screenWidth * 1.5 / 10,
              child: Center(
                child: InkWell(
                  key: Key("record"),
                  child: Icon(
                    Icons.circle,
                    color: Colors.red,
                  ),
                  onTap: () {
                    _scaffoldKey.currentState.showBottomSheet(
                        (BuildContext context) => _recordBottomSheet(
                            screenWidth, screenHeight, recordingList[recordi]));
                  },
                ),
              ),
            ),
            SizedBox(
              width: screenWidth * 1.5 / 10,
              child: Center(
                child: InkWell(
                  child: _isPlaying
                      ? Icon(
                          Icons.stop,
                          size: 35,
                        )
                      : Icon(
                          Icons.play_arrow,
                          size: 35,
                        ),
                  onTap: () {
                    if (_isPlaying == true)
                      _isPlaying = false;
                    else
                      _isPlaying = true;
                    setState(() {
                    });
                    // }
                  },
                ),
              ),
            )
          ],
        ),
      );

我排除了有关声音操作的代码，因为它对这种情况并不重要，我只留下了切换按钮的布尔值。 我真的很感激一些关于如何使每个按钮对录音独一无二的建议。

这是Listview，其中存储了音频forms

child: ListView.builder(
              itemCount: recordingList.length + 1,
              itemBuilder: (context, index) {
                if (index < recordingList.length) {
                  return _audioForm(screenWidth, screenHeight, index);
                } else {
                  return _addButton();
                }
              }),

Answer 1

代码中的所有按钮都使用相同的 bool 变量...因此，如果您调用 setState() 整个小部件树将被重建，所有按钮都会将它们的外观更新为更改后的 bool 值。 尝试创建一个新的 StatefulWidget，其中每个按钮都有自己特定的 bool 值。

或者使用带有布尔值的 map，像这样

Map<int,bool> isPlaying = {
//example values
0: true,
1: false,
};

您的 onTap 方法应如下所示：

onTap: () {
    isPlaying.update(index, (value) => !value, ifAbsent: ()=> true);
   setState(() {});
    },

您的图标小部件应如下所示：

child: 
      Icon(
        (_isPlaying[index] ?? false) ? Icons.stop : Icons.play_arrow,
        size: 35,
       ),