Flutter 颤振：setState不更新内部小部件_Flutter_Setstate_Statefulwidget

Flutter 颤振：setState不更新内部小部件

flutter

Flutter 颤振：setState不更新内部小部件,flutter,setstate,statefulwidget,Flutter,Setstate,Statefulwidget,我有一个歌曲播放列表屏幕，其中包括歌曲列表和用于音频播放/暂停的导航栏。我将歌曲字段的初始值设置为歌曲列表的第一个元素，但是，当我使用setState（）更新所选歌曲时，导航栏不会更新其歌曲 class Body extends StatefulWidget { @override BodyState createState() => BodyState(); } class BodyState extends State<Body> { Music select

我有一个歌曲播放列表屏幕，其中包括歌曲列表和用于音频播放/暂停的导航栏。我将歌曲字段的初始值设置为歌曲列表的第一个元素，但是，当我使用

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)

调试代码时，

selectedSong

字段按预期更新，但是

music

中的

MusicBar

字段未更新

对于MusicBar类：

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扩展StatefulWidget{
最后的音乐；
const MusicBar（{Key，this.music}）：super（Key:Key）；
MusicBarState createState（）=>MusicBarState（音乐：音乐）；
}
类MusicBarState扩展状态{
最后的音乐；
MusicBarState（{this.music}）；
AudioPlayer=AudioPlayer（）；
@凌驾
void initState（）{
super.initState（）；
//持续时间=音乐持续时间；
player.onDurationChanged.listen（（更新的持续时间）{
设置状态（）{
持续时间=更新的持续时间；
});
});
player.onAudioPositionChanged.listen（（更新的位置）{
设置状态（）{
位置=更新的位置；
});
});
}
@凌驾
无效处置（）{
super.dispose（）；
player.stop（）；
player.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回容器(
...

我做错了什么，以至于

MusicBar

小部件没有更新？

如果需要，歌曲列表在

Body

类之外定义，我使用的是MusicBarState中的

AudioPlayer

库

，您可以使用

小部件

访问音乐上的音乐场。您可以将状态重构为：

类MusicBar扩展StatefulWidget{
最后的音乐；
const MusicBar（{Key，this.music}）：super（Key:Key）；
MusicBarState createState（）=>MusicBarState（）；//空构造函数
}
类MusicBarState扩展状态{
//去掉这个
//最后的音乐；
//MusicBarState（{this.music}）；
someMethod（）{
//您可以使用小部件访问音乐：
打印（widget.music）；
}
// ...
}

测试并检查现在是否工作

这有何区别？我想了解它背后的逻辑。调用setState后，build方法呈现所有

小部件

。如果将音乐引用传递给StatefulWidget，然后再传递给State，则仅引用它被传递，State无法在小部件中查看音乐引用的更改。createState方法仅在widget具有创建新状态时调用，而不是在其父项更新时调用。如果使用

widget

，则在MusicBar重建过程中，您可以确保始终使用传递到widget而不是状态的新引用。哦，谢谢！但是我如何检测widget.music是否已更改？因为我需要这样做停止播放并重置滑块，以便我可以播放新歌。是否有任何功能可以让我收听StatefulWidget状态的更改？您可以尝试在“音乐”模型中实现一些模式，如

Observer

。您还可以使用状态管理器（如提供程序、Bloc等）如果要在不同部分或全局范围内使用当前音乐，则可以操纵当前音乐的状态。也可以覆盖导航栏状态的didChangeDependecies方法。

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(
      ...