flutter - 如何像 Instagram 一样在自定义网格中播放视频

Question

我有一个类似于 Instagram 的搜索字段，我使用 flutter_staggered_grid_view 实现了它，并且能够在大框中显示视频，但是当用户滚动时如何播放它们。我正在尝试使用 inview_notifier_list，但无法成功。我只想在用户向下滚动时播放视频。如何做到这一点？

标签： flutterflutter-dependencies

Answer 1

我使用 VisibilityDetector 实现了这一点。如果 80% 的视频可见，则播放，否则暂停。

@override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final deviceRatio = size.width / size.height;
    return Scaffold(
      body: Center(
          child: controller.value != null && controller.value.initialized
              ? VisibilityDetector(
                  key: ObjectKey(controller),
                  onVisibilityChanged: (visibility) {
                    if (visibility.visibleFraction > 0.8) {
                      controller.play();
                    } else {
                      controller.pause();
                    }
                  },
                  child: CachedVideoPlayer(controller)
                )
              : Stack(
                children: <Widget>[
                  Positioned.fill(
                    child: Container(
                      child: Image.network(
                        widget.image,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ],
              ),),
    );
  }
}