flutter 中的图标没有不断更新

Question

Flutter 试图保持 listtile 元素的图标更新，但是当您单击同一元素的图标时，它不会更新，当您单击不同元素的图标时，它会更新。 Gif文件有videodo，同一元素的图标不会第二次改变。

 import 'dart:developer';
 import 'package:flutter/material.dart';
 import 'package:just_audio/just_audio.dart';

class MusicPlayerController extends ChangeNotifier {
    final player = AudioPlayer();


   int  _playingIndex = -1;

   MusicPlayerController() {
       player.playerStateStream.listen((state) {
      if (state.processingState == ProcessingState.completed) {
        _playingIndex +=1;
         notifyListeners(); 
      }
   });
  }


 Future<void> playOrPause(int index, String uri) async {

    if (index == _playingIndex) {
      if (player.playing){
        player.stop();
        icon(index);
       }
   else{
     player.play();
   
    }
   
   } else {
     player.setAudioSource(AudioSource.uri(Uri.parse(uri)));
      player.play();
     _playingIndex = index;
       notifyListeners(); 
    }
   }

 Icon icon(int index) {

     if (index == _playingIndex) { 

 
      return player.playing ?  Icon(Icons.pause_circle) :
       Icon(Icons.play_circle_outline_outlined) ;
  
    } else {
        return Icon(Icons.play_circle_outline_outlined);
    }
   }
  }




     return ListTile(
              title: ,
              subtitle:,
              leading,
              trailing:Consumer<MusicPlayerController>(
                builder: (context, controller, child) {
                    
               return IconButton(
                        
                         iconSize: 30,
                         onPressed: () {  
                                             
              controller.playOrPause(index,(provider.musicList[index].uri).toString());
                           
                         },
                         icon:  controller.icon(index),
                      );
                },
              ) 
            );

Answer 1

创建ListTile时，您根据当前状态确定图标。当您单击某个图块时，您会更改该状态（更改 _playingIndex）。但是，您不会告诉 Flutter 状态已更改。所以 Flutter 不会更新 Icon 小部件。

例如，如果您

playOrPause

方法总是以如下形式结束：

setState(() { /* we want the icon to changed. */ });

然后 Flutter 知道小部件的状态已更改，它将重新渲染所有内容 - 并且图标也会更新。

您可以在此处了解有关状态管理的更多信息。