Flutter：setState 不更新内部小部件答案

【问题标题】：Flutter: setState does not update inner widgetFlutter：setState 不更新内部小部件
【发布时间】：2021-07-10 22:29:00
【问题描述】：

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

对于 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 小部件没有更新？如果需要，歌曲列表在Body 类之外定义，我正在使用audioplayers 库

【问题讨论】：

标签： flutter setstate statefulwidget

【解决方案1】：

在 MusicBarState 中，您可以使用 widget 访问音乐上的音乐字段。您可以将 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);
 }
 // ...
}

测试并检查现在是否有效

【讨论】：

这有什么不同？我想了解它背后的逻辑。
build 方法在调用 setState 后渲染所有 widgets。如果您将音乐引用传递给 StatefulWidget，然后再传递给 State，则仅引用它被传递，State 无法查看小部件中音乐引用的更改。 createState 方法仅在小部件具有创建新状态时调用，而不是在其父对象更新时调用。如果您使用widget，则始终在重建 MusicBar 时，您可以确保始终采用传递给小部件而不是状态的新引用
哦，谢谢！但是如何检测 widget.music 是否发生了变化？因为我需要停止播放并重置滑块才能播放新歌。有什么功能可以监听 StatefulWidget 的 State 变化吗？
你可以尝试在你的`Music`模型中实现一些类似Observer的模式。如果您打算在不同部分或全局使用它，您还可以使用状态管理器（如 Provider、Bloc 等）来操纵当前音乐的状态。
您也可以只覆盖导航栏状态的 didChangeDependecies 方法。