Flutter BetterPlayer自定义控件始终显示问题求助

问题核心是自定义控件未维护可见性状态，也未利用onControlsVisibilityChanged回调实现与BetterPlayer的交互，缺少自动隐藏逻辑。以下是完整修改方案：

步骤1：添加状态管理与自动隐藏逻辑 #

在自定义控件的State类中新增可见性变量、计时器，以及配套的显示/隐藏方法：

class _CustomControlsWidgetState extends State<CustomControlsWidget> {
  bool _isVisible = true;
  Timer? _hideTimer;
  final Duration _hideDelay = const Duration(seconds: 3); // 无交互3秒后自动隐藏

  @override
  void initState() {
    super.initState();
    _setupPlayerListeners();
  }

  @override
  void dispose() {
    _hideTimer?.cancel();
    widget.controller?.removeListener(_onPlayerStateChanged);
    super.dispose();
  }

  void _setupPlayerListeners() {
    // 监听播放器状态：播放时启动自动隐藏，暂停时保持控件显示
    widget.controller?.addListener(_onPlayerStateChanged);
  }

  void _onPlayerStateChanged() {
    if (widget.controller?.isPlaying() ?? false) {
      _startHideTimer();
    } else {
      _cancelHideTimer();
      _showControls();
    }
  }

  void _startHideTimer() {
    _cancelHideTimer();
    _hideTimer = Timer(_hideDelay, _hideControls);
  }

  void _cancelHideTimer() {
    _hideTimer?.cancel();
    _hideTimer = null;
  }

  void _showControls() {
    if (!_isVisible) {
      setState(() {
        _isVisible = true;
      });
      widget.onControlsVisibilityChanged?.call(true);
    }
    _startHideTimer(); // 显示后重新启动隐藏计时器
  }

  void _hideControls() {
    if (_isVisible && (widget.controller?.isPlaying() ?? false)) {
      setState(() {
        _isVisible = false;
      });
      widget.onControlsVisibilityChanged?.call(false);
    }
  }

步骤2：添加交互与平滑动画 #

修改build方法，用AnimatedOpacity实现显示/隐藏的平滑过渡，同时添加手势检测器处理屏幕点击：

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 点击屏幕切换控件可见性
        _isVisible ? _hideControls() : _showControls();
      },
      child: AnimatedOpacity(
        opacity: _isVisible ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 300),
        child: Container(
          height: 50,
          decoration: BoxDecoration(
            color: Colors.purple.withOpacity(0.2),
            borderRadius: BorderRadius.circular(15),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              InkWell(
                onTap: () async {
                  _showControls(); // 点击控件时保持显示
                  Duration? videoPosition = await widget.controller!.videoPlayerController!.position;
                  Duration rewindDuration = Duration(seconds: (videoPosition!.inSeconds - 2));
                  if (rewindDuration < Duration.zero) {
                    widget.controller!.seekTo(Duration.zero);
                  } else {
                    widget.controller!.seekTo(rewindDuration);
                  }
                },
                child: const Icon(Icons.fast_rewind, color: Colors.white),
              ),
              InkWell(
                onTap: () {
                  _showControls();
                  if (widget.controller!.isPlaying()!) {
                    widget.controller!.pause();
                  } else {
                    widget.controller!.play();
                  }
                },
                child: Icon(
                  widget.controller!.isPlaying()! ? Icons.pause : Icons.play_arrow,
                  color: Colors.white,
                ),
              ),
              InkWell(
                onTap: () async {
                  _showControls();
                  Duration? videoPosition = await widget.controller!.videoPlayerController!.position;
                  Duration forwardDuration = Duration(seconds: (videoPosition!.inSeconds + 2));
                  Duration totalDuration = widget.controller!.videoPlayerController!.value.duration!;
                  if (forwardDuration > totalDuration) {
                    widget.controller!.seekTo(Duration.zero);
                    widget.controller!.pause();
                  } else {
                    widget.controller!.seekTo(forwardDuration);
                  }
                },
                child: const Icon(Icons.fast_forward, color: Colors.white),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

关键说明 #

1. 可见性控制：通过_isVisible变量结合AnimatedOpacity实现平滑过渡，对齐默认控件的交互体验。
2. 自动隐藏逻辑：播放状态下启动计时器，无交互自动隐藏；暂停时强制显示控件。
3. 交互优化：点击屏幕切换可见性，点击控件按钮时主动保持控件显示，避免操作时控件突然消失。
4. 状态同步：调用onControlsVisibilityChanged通知BetterPlayer控件状态变化，确保播放器内部逻辑与自定义控件一致。

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