Flutter：setState 不更新内部小部件

如何解决Flutter：setState 不更新内部小部件

我有一个歌曲播放列表屏幕，其中包括一个歌曲列表和一个用于音频播放/暂停的导航栏。我将歌曲字段的初始值设置为歌曲列表的第一个元素，但是，当我使用 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 字段按预期更新，但是 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 小部件没有更新？如果需要，歌曲列表在 Body 类之外定义，我正在使用 audioplayers 库

解决方法

在 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 不更新内部小部件

解决方法

相关推荐