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

Question

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

不幸的是，当我按下其中一个录音的播放按钮时，所有录音的每个播放按钮都会从 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，其中存储了音频表单

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<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,
       ),

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

How to make Listview of unique buttons in Flutter?

audio

android

button

flutter