flutter better_player自定义控件问题

Question

我正在为 flutter

better_player

小部件实现自定义控件，它工作得很好，但是 问题是自定义控件卡在屏幕上（始终可见），与可以切换可见性的默认材质或 cupertino 控件不同。

  BetterPlayerController? _betterPlayerController;

  @override
  void initState() {
    _betterPlayerController = BetterPlayerController(
      BetterPlayerConfiguration(
        controlsConfiguration: BetterPlayerControlsConfiguration(
          playerTheme: BetterPlayerTheme.custom,
          customControlsBuilder: (controller, onControlsVisibilityChanged) =>
              // I believe onControlsVisibilityChanged is responsible for visibility toggle
              CustomControlsWidget(
                  controller: controller,
                  onControlsVisibilityChanged: onControlsVisibilityChanged),
        ),
      ),
      //dataSource etc...
    );

    super.initState();
  }

@override
  Widget build(BuildContext context) {
    final provider = Provider.of<SeriesVideoProvider>(context);
    final seriesVideo = provider.seriesVideo;
    final mediaQuery = MediaQuery.sizeOf(context);
    print(mediaQuery.width);

    return Scaffold(
      backgroundColor: Colors.black,
      body: seriesVideo == null
          ? kProgressIndicator
          : _betterPlayerController != null
              ? Center(
                  child: Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      AspectRatio(
                        aspectRatio: 16 / 9,
                        child:
                            BetterPlayer(controller: _betterPlayerController!),
                      ),

                      Align(
                        alignment: Alignment.topLeft,
                        child: Container(
                          width: mediaQuery.width / 12,
                          margin: EdgeInsets.only(left: mediaQuery.width / 15),
                          child: Stack(children: [
                            ClipRRect(
                              child: BackdropFilter(
                                filter:
                                    ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                                child: Padding(
                                  padding: EdgeInsets.symmetric(
                                      horizontal: mediaQuery.width / 90,
                                      vertical: mediaQuery.height / 90),
                                  child: Text(
                                    'Seriez',
                                    style: GoogleFonts.cairo(
                                      fontSize: 15,
                                      color: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ]),
                        ),
                      ),
                    ],
                  ),
                )
              : kProgressIndicator,
    );
  }

这是我的自定义控件小部件：

class CustomControlsWidget extends StatefulWidget {
  final BetterPlayerController? controller;
  final Function(bool visbility)? onControlsVisibilityChanged;

  const CustomControlsWidget(
      {super.key, this.controller, this.onControlsVisibilityChanged});

  @override
  State<CustomControlsWidget> createState() => _CustomControlsWidgetState();
}

class _CustomControlsWidgetState extends State<CustomControlsWidget> {


  
  @override
  Widget build(BuildContext context) {
      widget.onControlsVisibilityChanged;
    
    return Container(
      height: 50,
      decoration: BoxDecoration(
        color: Colors.purple.withOpacity(0.2),
        borderRadius: BorderRadius.circular(15),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          InkWell(
            onTap: () async {
              Duration? videoDuration =
                  await widget.controller!.videoPlayerController!.position;
              setState(() {
                if (widget.controller!.isPlaying()!) {
                  Duration rewindDuration =
                      Duration(seconds: (videoDuration!.inSeconds - 2));
                  if (rewindDuration <
                      widget
                          .controller!.videoPlayerController!.value.duration!) {
                    widget.controller!.seekTo(Duration(seconds: 0));
                  } else {
                    widget.controller!.seekTo(rewindDuration);
                  }
                }
              });
            },
            child: Icon(
              Icons.fast_rewind,
              color: Colors.white,
            ),
          ),
          InkWell(
            onTap: () {
              setState(() {
                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 {
              Duration? videoDuration =
                  await widget.controller!.videoPlayerController!.position;
              setState(() {
                if (widget.controller!.isPlaying()!) {
                  Duration forwardDuration =
                      Duration(seconds: (videoDuration!.inSeconds + 2));
                  if (forwardDuration >
                      widget
                          .controller!.videoPlayerController!.value.duration!) {
                    widget.controller!.seekTo(Duration(seconds: 0));
                    widget.controller!.pause();
                  } else {
                    widget.controller!.seekTo(forwardDuration);
                  }
                }
              });
            },
            child: Icon(
              Icons.fast_forward,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

我提到控件工作正常，但它们始终可见，我用谷歌搜索但从未找到

onControlsVisibilityChanged

的实现

Answer 1

这里最重要的是你的控件应该决定它自己的可见性并自行显示/隐藏自己。

onControlsVisibilityChanged

– 这是当控件更改其可见性时应调用的回调，它与控件的可见性本身无关，您只需在此处通知

BetterPlayerController

控件已隐藏或显示。

您可以在此处查看材质控件的实现，并尝试在您自己的控件中重新实现它。关键点（至少在我看来）：

1. 您可以扩展

   BetterPlayerControlsState

   而不仅仅是

   State

   并获得一些有用的覆盖。
2. 将 root

   Container

   包裹在

   GestureDetector

   中以跟踪用户与屏幕的交互，从而决定是否应显示或隐藏控件。默认的

   BetterPlayerMultipleGestureDetector

   也可以在那里使用。
3. 还可以使用

   AnimatedOpacity

   来制作控件消失的动画 在材料中

但总体结论是——控制措施应该管理其自身的可见性。