Flutter：setState 不更新内部小部件

Question

我有一个歌曲播放列表屏幕，其中包括一个歌曲列表和一个音频导航栏 play/pause。我将歌曲字段的初始值设置为歌曲列表的第一个元素，但是，当我使用 setState() 更新所选歌曲时，导航栏不会更新其歌曲。

class Body extends StatefulWidget {
  @override
  BodyState createState() => BodyState();
}

class BodyState extends State<Body> {
  Music selectedSong = songs[0];
  ...
  @override
  Widget build(BuildContext context) {
    return Column(
       ...
       Expanded(
          child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          padding: const EdgeInsets.only(top: 20),
          itemCount: songs.length,
          itemBuilder: (context, i) => songCard(songs[i])
       ...
       MusicBar(music: selectedSong)

对于songCard()函数：

 Widget songCard(Music item) {
    return ListTile(
      onTap: () => {
        setState(() {
          selectedSong = item;
        })
      },
     ...

当我调试代码时，selectedSong 字段按预期更新，但是 MusicBar 中的 music 字段未更新。

对于音乐栏 class:

class MusicBar extends StatefulWidget {
  final Music music;
  const MusicBar({Key key, this.music}) : super(key: key);
  MusicBarState createState() => MusicBarState(music: music);
}

class MusicBarState extends State<MusicBar> {

  final Music music;
  MusicBarState({this.music});

  AudioPlayer player = AudioPlayer();

  @override
  void initState() {
    super.initState();
    // duration = music.duration;
    player.onDurationChanged.listen((updatedDuration) {
      setState(() {
        duration = updatedDuration;
      });
    });

    player.onAudioPositionChanged.listen((updatedPosition) {
        setState(() {
          position = updatedPosition;
        });
    });
  }

  @override
  void dispose(){
    super.dispose();
    player.stop();
    player.dispose();
  }
  
  @override
  Widget build(BuildContext context){
    return Container(
      ...

我做错了什么导致 MusicBar 小部件没有更新？如果需要，歌曲列表在 Body class 之外定义，我正在使用 audioplayers 库

Answer 1

在 MusicBarState 中，您可以使用 widget 访问 Music 上的音乐字段。您可以将 State 重构为：

class MusicBar extends StatefulWidget {
  final Music music;
  const MusicBar({Key key, this.music}) : super(key: key);
  MusicBarState createState() => MusicBarState(); // Empty constructor
}

class MusicBarState extends State<MusicBar> {
  // Remove this
  // final Music music;
  // MusicBarState({this.music});

 someMethod() {
   // You can access to music using widget:
   print(widget.music);
 }
 // ...
}

测试并检查现在是否有效

Flutter：setState 不更新内部小部件

Flutter: setState does not update inner widget

setstate

flutter

statefulwidget