Flutter实现点击播放中视频显示暂停图标并切换播放按钮

你当前的代码已经实现了基础的播放/暂停切换，但要实现点击正在播放的视频时先显示半秒暂停图标，再暂停视频并显示播放按钮的效果，需要给BasicOverlayWidget添加状态管理（因为需要临时控制暂停图标的显示时长），具体修改如下：

修改后的BasicOverlayWidget代码 #

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class BasicOverlayWidget extends StatefulWidget {
  final VideoPlayerController? controller;
  const BasicOverlayWidget({
    Key? key,
    this.controller,
  }) : super(key: key);

  @override
  State<BasicOverlayWidget> createState() => _BasicOverlayWidgetState();
}

class _BasicOverlayWidgetState extends State<BasicOverlayWidget> {
  bool _showPauseIcon = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        final controller = widget.controller;
        if (controller == null) return;

        if (controller.value.isPlaying) {
          // 先显示暂停图标
          setState(() => _showPauseIcon = true);
          // 延迟500毫秒后暂停视频并隐藏暂停图标，显示播放按钮
          Future.delayed(const Duration(milliseconds: 500), () {
            if (mounted) {
              controller.pause();
              setState(() => _showPauseIcon = false);
            }
          });
        } else {
          // 视频暂停时点击直接播放，隐藏播放按钮
          controller.play();
        }
      },
      child: Stack(children: [
        buildPlayOrPauseIcon(),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: VideoProgressIndicator(widget.controller!, allowScrubbing: true),
        )
      ]),
    );
  }

  Widget buildPlayOrPauseIcon() {
    final controller = widget.controller;
    if (controller == null) return const SizedBox();

    // 优先显示暂停图标（如果触发了显示逻辑），否则根据播放状态显示播放/隐藏
    if (_showPauseIcon) {
      return Container(
        alignment: Alignment.center,
        color: Colors.black26,
        child: Icon(
          Icons.pause,
          color: Colors.white,
          size: 80,
        ),
      );
    } else if (!controller.value.isPlaying) {
      return Container(
        alignment: Alignment.center,
        color: Colors.black26,
        child: Icon(
          Icons.play_arrow,
          color: Colors.white,
          size: 80,
        ),
      );
    } else {
      return const SizedBox();
    }
  }
}

关键修改点说明 #

• 将BasicOverlayWidget从StatelessWidget改为StatefulWidget，新增_showPauseIcon状态变量控制暂停图标的显示
• 优化onTap逻辑：点击播放中的视频时，先立即显示暂停图标，延迟500毫秒后再执行暂停操作并切换为播放按钮
• 重构buildPlayOrPauseIcon方法，根据_showPauseIcon和视频播放状态来渲染对应的图标
• 添加mounted判断，避免组件销毁后执行状态更新导致异常

原VideoPlayerBaseWidget代码无需修改 #

你的VideoPlayerBaseWidget可以保持原样，直接使用修改后的BasicOverlayWidget即可。

内容的提问来源于stack exchange，提问作者best_of_man