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

我已经添加了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,
              ),
            ),
          ),
        ),
      );
    },
  ),

字符串
下面是我的Controller。我使用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;
}

型
当播放按钮被按下时，我想根据当前播放的声音（Container）改变容器的颜色。我在播放按钮的onPress上调用this 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”。
我错过了一些简单的东西吗？

此问题可能与您在Controller中管理audioPlayerCurrentIndex状态的方式有关。
为了确保audioPlayerCurrentIndex中的更改触发GridView.builder的重建。为此，您需要在Controller中显式地将其标记为可观察。您可以使用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中容器的颜色。

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

1条答案

相关问题

热门标签

最新问答