如何制作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,
       ),