改变特定列表索引的 bgcolor 颤动

Question

在我的 flutter 应用程序中，我想通过播放音频来突出显示每个列表项中的文本。当音频结束时，下一个列表项应该突出显示。但实际情况是我无法仅突出显示特定索引。目前，当播放列表开始时，在每个替代音频上，所有列表项都会更改 bgcolor。那么我如何指定要突出显示的索引呢？例如，在 7 个音频的播放列表中，第一个项目应该在第一个音频播放时突出显示。请帮助！

 text: TextSpan(
                          text: arabic  ,
                          style: TextStyle(
                            color: getTextColor(index),
                            backgroundColor:  ishighlight ? Colors.blue:Colors.white,
                            fontSize: 24.0,
                            fontWeight: FontWeight.w200,
                            fontFamily: 'uthmanitext', ),

 void playAudioNetwork() async{

     Playlist playlist;

    List<Audio> _audios = [];

    for (int i =1;i<=7;i++) {

      String Url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i}.mp3';
      _audios.add(Audio.network(Url));
      print(Url);
    }
    playlist = Playlist(audios: _audios);
    audioPlayer.playlistAudioFinished.listen((event) {

      setState(() {
ishighlight= !ishighlight;
      });
    });

    audioPlayer.open(
      playlist,
      autoStart: true,
      showNotification: true,
    );

  }

Answer 1

您定义一个布尔值来指示名为 ishighlight 的高亮状态，当其中一个项目正在播放时，您更改 ishighlight 值，然后您在这一行中由 ishighlight 决定：

backgroundColor:  ishighlight ? Colors.blue:Colors.white,

因此所有项目都将突出显示。您应该有一个非布尔值的整数，名为 highlightedIndex 然后像这样更改您的代码：

 text: TextSpan(
                          text: arabic  ,
                          style: TextStyle(
                            color: getTextColor(index),
                            backgroundColor:  highlightedIndex == index ? Colors.blue:Colors.white,
                            fontSize: 24.0,
                            fontWeight: FontWeight.w200,
                            fontFamily: 'uthmanitext', ),

 void playAudioNetwork(int index) async{

     Playlist playlist;

    List<Audio> _audios = [];

    for (int i =1;i<=7;i++) {

      String Url= 'https://everyayah.com/data/Ayman_Sowaid_64kbps/00100${i}.mp3';
      _audios.add(Audio.network(Url));
      print(Url);
    }
    playlist = Playlist(audios: _audios);
    audioPlayer.playlistAudioFinished.listen((event) {

      setState(() {
highlightedIndex= index;
      });
    });

    audioPlayer.open(
      playlist,
      autoStart: true,
      showNotification: true,
    );

  }

您应该将列表的项目索引传递给 playAudioNetwork 方法

改变特定列表索引的 bgcolor 颤动

Changing bgcolor of specific list indexes flutter

listview

audio-player

flutter