更改特定列表索引的 bgcolor 颤动答案

【问题标题】：Changing bgcolor of specific list indexes flutter更改特定列表索引的 bgcolor 颤动
【发布时间】：2022-01-04 01:10:14
【问题描述】：

在我的颤振应用程序中，我想突出显示每个列表项中的文本并播放音频。音频结束后，应突出显示下一个列表项。但是发生的事情是我无法仅突出显示特定索引。目前，当播放列表开始时，在每个备用音频上，所有列表项都会更改 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,
    );

  }

【问题讨论】：

标签： flutter listview audio-player

【解决方案1】：

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

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

所以所有项目都会被突出显示。您应该有一个名为 highlightIndex 的整数而不是布尔值，然后像这样更改您的代码：

 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 方法

【讨论】：

非常感谢您的帮助。无法将索引传递给该方法，因为按下底部导航栏中的播放按钮时会调用 playAudioNetwork 方法。如何访问 listview.builder 之外的列表项索引？
你能帮忙回答一下吗？：stackoverflow.com/questions/70130093/…谢谢
好的，我会看你的问题
知道如何传递正确的列表项索引吗？
您可以从列表视图控制器偏移量和您的项目大小（例如 offset / itemSize = position）中获取它，或者最好使用 scrollable_positioned_list 插件而不是 listview