AudioPlayer 搜索栏在对话框颤振中不起作用答案

【问题标题】：AudioPlayer seekbar not working in Dialog FlutterAudioPlayer 搜索栏在对话框颤振中不起作用
【发布时间】：2020-10-22 14:40:48
【问题描述】：

我在对话框中实现了一个音频播放器，但它的设置状态没有按预期工作，暂停和播放图标变化良好，但 setState({}) 和 seekbar 没有按预期暂停/播放音频。 Playing 是一个布尔值，用于检查音频是否正在播放。它最初设置为 false。请帮忙。

Future<void> _showMyDialog() async {
        Duration _duration = Duration();
        Duration _position = Duration();
        AudioPlayer audioPlayer = AudioPlayer();
    
        return showDialog(
          context: context,
          builder: (BuildContext context) {
            return StatefulBuilder(builder: (context, setState) {
              return Dialog(
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      Container(
                        height: 40,
                        width: 40,
                        child: Image.asset('assets/image/video.png'),
                      ),
                      Slider.adaptive(
                        onChanged: (double value) {
                          setState(() {
                            audioPlayer.seek(Duration(seconds: value.toInt()));
                          });
                        },
                        min: 0.0,
                        max: _duration.inSeconds.toDouble(),
                        value: _position.inSeconds.toDouble(),
                      ),
                      InkWell(
                        onTap: () async {
                          var url =
                              "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-12.mp3";
    
                          if (playing) {
                            var res = await audioPlayer.pause();
                            if (res == 1) {
                              setState(() {
                                playing = false;
                              });
                            }
                          } else {
                            var res = await audioPlayer.play(url, isLocal: true);
                            if (res == 1) {
                              setState(() {
                                playing = true;
                              });
                            }
                          }
                          audioPlayer.onDurationChanged.listen((Duration duration) {
                            setState(() {
                              _duration = duration;
                            });
                          });
    
                          audioPlayer.onAudioPositionChanged
                              .listen((Duration duration) {
                            setState(() {
                              _position = duration;
                            });
                          });
                        },
                        child:
                            Icon(playing == false ? Icons.play_arrow : Icons.pause),
                      )
                    ],
                  ),
                ),
              );
            });
          },
        );
      }

【问题讨论】：

我不知道在onTap 中添加这些侦听器是否是个好主意。每次单击时，您都会添加侦听器而不先删除它们。通常侦听器在 initState 中初始化一次。也许您可以用有状态的小部件替换有状态的构建器并将您的逻辑移到那里？

标签： flutter

【解决方案1】：

请记住 setState 在颤振中的对话框中不起作用。因此您必须创建看起来像对话框的单独的 statefull 小部件/屏幕。然后就可以使用 setState 函数了。

在这里，您可以通过使用以下代码启动脚手架小部件来轻松创建弹出框屏幕

Scaffold(
          backgroundColor: Colors.black.withOpacity(0.85),
          body: Material(
            type: MaterialType.transparency,
            child: Center(
              child: Container(
                margin: EdgeInsets.fromLTRB(25, 15, 25, 15),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                ),
                child: SingleChildScrollView(

【讨论】：