Flutter：在创建 GridView.builder 的项目后在代码中动态更新它们

Question

我在按“+”按钮时添加了 3 个带有 GridView.builder 的容器。

这是我的 GridView.builder 代码：

Obx(
  () => GridView.builder(
    itemCount: c.gridItems.length,
    shrinkWrap: true,
    gridDelegate:
        SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            crossAxisSpacing: 20.dp,
            mainAxisSpacing: 10.dp,
            mainAxisExtent: 60.dp),
    itemBuilder: (BuildContext context, int index) {
      final isCurrentContainer =
          (index == c.audioPlayerCurrentIndex % 3);
      Color containerColor = isCurrentContainer
          ? Colors.blue
          : Colors.grey;

      return GestureDetector(
        onTap: () { 

          showDialog(
            context: context,
            builder: (BuildContext context) =>
                StatefulBuilder(
              builder: (context, state) => KeysDialog(),
            ),
          );
        },
        child: Obx(
          () => Container(
            width: 60.dp,
            height: 60.dp,
            color: containerColor,
            child: Center(
              child: Text(
                c.gridItems[index],
                style: white22TextStyle,
              ),
            ),
          ),
        ),
      );
    },
  ),

这是我的控制器。我正在使用 getX:

class Controller extends GetxController {
  var gridItems = [].obs;

  var isMetronomeSelected = false.obs;
  var isBassSelected = false.obs;
  var isDrumsSelected = false.obs;

  var tonalitySelected = 'Major'.obs;
  var keySelected = 'A'.obs;
  var rhythmsFolderSelected = 'Slow Dancing'.obs;
  var bpmSliderValue = 95.0.obs;

  var assetSources = [].obs;
  var audioPlayerCurrentIndex = 0;
  var audioPlayerLoopCount = 0.obs;
}

我想在按下播放按钮时根据当前播放的声音（容器）更改容器的颜色。我在播放按钮的 onPress 上调用 这个 playAudio() 方法：

Future<void> playAudio() async {
    await audioPlayer
        .play(AssetSource(c.assetSources[c.audioPlayerCurrentIndex]));
    print(c.assetSources.length);
    print(c.assetSources);

    await audioPlayer.onPlayerComplete.first;

    c.audioPlayerLoopCount.value++;

    // Check if all audios have played the same number of times
    if (c.audioPlayerLoopCount.value == c.assetSources.length) {
      c.audioPlayerLoopCount.value = 0;

      c.audioPlayerCurrentIndex = 0;
      playAudio();
    } else {
      // Play the next audio
      c.audioPlayerCurrentIndex =
          (c.audioPlayerCurrentIndex + 1) % c.assetSources.length;
      playAudio();
    }
  }

我想将 audioPlayerCurrentIndex 与 GridView 项目的索引进行比较，但这些项目的索引在播放按钮调用时不会更新。因此，一旦我创建了 3 个容器，它就始终保持“2”。

我错过了一些简单的事情吗？

Answer 1

该问题可能与您在控制器中管理 audioPlayerCurrentIndex 状态的方式有关。

确保audioPlayerCurrentIndex 的更改触发GridView.builder 的重建。为此，您需要在控制器中将其显式标记为可观察。您可以使用 RxInt 来实现此目的：

class Controller extends GetxController {
  var gridItems = [].obs;

  // Define audioPlayerCurrentIndex as RxInt
  var audioPlayerCurrentIndex = 0.obs;

  // Other variables...
}

所见：

  Future<void> playAudio() async {
  // ... Your existing code ...

  // Update audioPlayerCurrentIndex when audio is played
  c.audioPlayerCurrentIndex.value =
  (c.audioPlayerCurrentIndex.value + 1) % c.assetSources.length;

  playAudio();
}

此更改应确保当audioPlayerCurrentIndex更改时，观察它的Obx小部件将触发重建，相应地更新UI，包括基于当前正在播放的音频的GridView.builder中容器的颜色。