每次用户滚动页面视图时，视频之间都会出现黑屏

Question

每当我滚动网页浏览时，在每个视频之前，我都会看到一个黑屏，我不确定为什么会出现。

尽管所有视频都在播放

一开始我以为是网络连接什么的，不过好像影响不大。

我正在从流中获取视频 URL。

屏幕：

class _PageViewBuilderState extends State<PageViewBuilder> {
  int _currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     
      body: StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
          stream:
              FirebaseFirestore.instance.collection('Videourls').snapshots(),
          builder: (ctx, snapshot) {
            if (snapshot.hasError) {
              const Center(
                child: Text('Unknown Error'),
              );
            }

            return !snapshot.hasData
                ? const Center(
                    child: CircularProgressIndicator(),
                  )
                : PageView.builder(
                    scrollDirection: Axis.vertical,
                    itemCount: snapshot.data!.docs.length,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    itemBuilder: (BuildContext context, int index) {
                      return VideoWidget(
                        urlVideo: snapshot.data!.docs[index].get('url'),
                      );
                    },
                  );
          }),
    );
  }
}

class VideoWidget extends StatefulWidget {
  VideoWidget({
    required this.urlVideo,
    Key? key,
  }) : super(key: key);

  final String urlVideo;

  @override
  State<VideoWidget> createState() => _VideoWidgetState();
}

class _VideoWidgetState extends State<VideoWidget> {
  VideoPlayerController? INvideoPlayerController;

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

    INvideoPlayerController = VideoPlayerController.network(widget.urlVideo)
      ..setLooping(true)
      ..initialize().then((value) => INvideoPlayerController?.play());
  }

  @override
  void dispose() {
    INvideoPlayerController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(alignment: Alignment.center, children: [
      AspectRatio(
        aspectRatio: MediaQuery.of(context).size.width /
            MediaQuery.of(context).size.height,
        
        child: INvideoPlayerController != null
            ? VideoPlayer(INvideoPlayerController!)
            : Container(),
      ),
      Column(children: [
        SizedBox(
          height: (3 / 4) * MediaQuery.of(context).size.height,
        ),
        Row(children: [
          SizedBox(
            width: (4 / 5) * MediaQuery.of(context).size.width,
          ),
          Column(children: [
            IconButton(
                alignment: Alignment.topCenter,
                iconSize: 30,
                color: Colors.black,
                onPressed: () async {
                  final url = Uri.parse(widget.urlVideo);
                  final response = await http.get(url);
                  final bytes =
                      response.bodyBytes; 

                  final temp = await getTemporaryDirectory();
                  final path = '${temp.path}/video.mp4';
                  File(path)
                      .writeAsBytesSync(bytes); 

                  await Share.shareFiles([path],
                      text: 'Check out this  \n\n');
                },
                icon: const Icon(Icons.share)),
            Text(
              'Share',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
            )
          ]),
        ]),
      ])
    ]);
  }
}

Answer 1

setState() 每次页面更改时都会调用。尝试删除 _currentPage 和 onPageChanged（如果未使用）并将其替换为 PageController().

例如，

PageView.builder(
    controller: _pageController,
    scrollDirection: Axis.vertical,
    itemCount: snapshot.data!.docs.length,
    itemBuilder: (BuildContext context, int index) {
        return VideoWidget(
        urlVideo: snapshot.data!.docs[index].get('url'),
        );
    },
);

尝试对有状态小部件使用 initState，以便在用户每次打开时将初始页面设置为 0。 _currentIndex这里仅供参考，不用不强制！

  PageController _pageController;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _currentIndex = 0;
    _pageController = new PageController(initialPage: _currentIndex);
  }

别忘了处理控制器。

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

每次用户滚动页面视图时，视频之间都会出现黑屏

A black screen is appearing between videos each time users scroll through page view

flutter

dart

flutter-layout

flutter-dependencies