时间戳

首页 > 解决方案 > AudioPlayer 搜索栏在对话框颤振中不起作用

flutter - AudioPlayer 搜索栏在对话框颤振中不起作用

问题描述

我在对话框中实现了一个音频播放器，但它的设置状态没有按预期工作，暂停和播放图标变化很好，但 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),
                      )
                    ],
                  ),
                ),
              );
            });
          },
        );
      }

标签： flutter

解决方案

请记住，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(

推荐阅读