Flutter 如何检查当前页面视图是否完全消失，下一个页面视图是否完全出现

我正在开发一个应用程序使用长笛。在应用程序a中有一个页面视图列表，每个页面视图出现时都会加载并播放视频。当视频消失时，任何页面视图都将停止播放视频。现在我有一个问题。当我在浏览页面之间缓慢滑动时，会同时出现两个浏览页面。每个页面视图显示一个部分。但这两个页面视图都在播放视频。我想知道我是否可以检查当前的页面浏览完全消失，然后我停止播放视频。当下一个页面视图完全显示时，它开始播放视频。因此，它不会同时在两个页面视图中播放视频。有人能帮我吗

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

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiplePage(),
    );
  }
}

class MultiplePage extends StatefulWidget {
  @override
  _MultiplePageState createState() => _MultiplePageState();
}

class _MultiplePageState extends State<MultiplePage> {
  PageController _controller;

  void scrollListener() {
    if (_controller.page == _controller.page.roundToDouble()) {
      print(_controller.page);
    }
  }

  @override
  void initState() {
    super.initState();
    _controller = PageController()..addListener(scrollListener);
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _controller,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, position) {
        return VideoApp();
      },
    );
  }
}

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {
          _controller.play();
        });
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.initialized
              ? AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          )
              : Container(),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.pause();
    _controller.dispose();
  }
}

import'package:video_player/video_player.dart'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
),
主页：多页（），
);
}
}
类MultiplePage扩展StatefulWidget{
@凌驾
_多重妊娠期createState（）=>_多重妊娠期（）；
}
类_多重妊娠扩展状态{
PageController\u控制器；
void scrollListener（）{
如果（_controller.page==_controller.page.roundToDouble（））{
打印（_controller.page）；
}
}
@凌驾
void initState（）{
super.initState（）；
_controller=PageController（）…addListener（scrollListener）；
}
@凌驾
小部件构建（构建上下文）{
返回PageView.builder(
控制器：_控制器，
滚动方向：轴垂直，
itemBuilder：（上下文、位置）{
返回VideoApp（）；
},
);
}
}
类VideoApp扩展了StatefulWidget{
@凌驾
_VideoAppState createState（）=>\u VideoAppState（）；
}
类\u VideoAppState扩展了状态{
视频播放控制器\u控制器；
@凌驾
void initState（）{
super.initState（）；
_控制器=VideoPlayerController.network(
'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
…初始化（）。然后（u41;{
//确保在视频初始化后，甚至在按下播放按钮之前，显示第一帧。
设置状态（）{
_controller.play（）；
});
});
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“视频演示”，
家：脚手架(
正文：中(
子项：_controller.value.initialized
？AspectRatio(
aspectRatio:_controller.value.aspectRatio，
子项：视频播放器（_控制器），
)
：Container（），
),
),
);
}
@凌驾
无效处置（）{
super.dispose（）；
_controller.pause（）；
_controller.dispose（）；
}
}

使用PageController检查页面是否完全翻转

---

实际上，您不需要手动停止消失页面上的视频

默认情况下，

PageView

将在页面完全滚动时自动处理页面。当你开始滚动时，它将重新创建

页面

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: PageView(
        children: <Widget>[
          Page1(),
          Page1(),
          Page1(),
        ],
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  Page1({Key key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    _controller.play();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          } else {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          }
        },
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“package:video_player/video_player.dart”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“视频播放器演示”，
主页：主页（），
);
}
}
类MainPage扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar（标题：文本（“演示”），
正文：页面视图(
儿童：[
第1页（），
第1页（），
第1页（），
],
),
);
}
}
类Page1扩展了StatefulWidget{
Page1（{Key}）：超级（Key:Key）；
@凌驾
_Page1State createState（）；
}
类_Page1State扩展状态{
视频播放控制器\u控制器；
未来(Future)初始设定未来玩家;；
@凌驾
void initState（）{
_控制器=VideoPlayerController.network(
'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
);
_initializeVideoPlayerFuture=_controller.initialize（）；
_控制器。设置循环（真）；
_controller.play（）；
super.initState（）；
}
@凌驾
无效处置（）{
_controller.dispose（）；
super.dispose（）；
}
@凌驾
小部件构建（构建上下文）{
返回中心(
孩子：未来建设者(
未来：_initializevideoplayer未来，
生成器：（上下文，快照）{
if（snapshot.connectionState==connectionState.waiting）{
返回中心（子项：CircularProgressIndicator（））；
}else if（snapshot.hasrerror）{
返回文本（“${snapshot.error}”）；
}否则{
返回AspectRatio(
aspectRatio:_controller.value.aspectRatio，
子项：视频播放器（_控制器），
);
}
},
),
);
}
}

非常感谢。我可以使用PageController检查页面是否完全更改。但是如何控制当前页面视图在这个addListener方法中调用像start_play_video这样的方法呢；嗨，我把我的示例代码粘贴在这里。我试着让它按我想要的方式运行，但失败了。你能帮我修一下吗？发电子邮件给我kherel@gmail.com. 给我看看你的项目，我会尽力帮助你。谢谢你的回答。但是如果你在两个页面之间缓慢滑动，就会有两个视频同时播放。如何控制前一页完全消失，下一页完全出现时，下一页才开始播放视频？

video_player: ^0.10.1+3
http: ^0.12.0+2
sprintf: ^4.0.2
preload_page_view: ^0.1.4

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo")),
      body: PageView(
        children: <Widget>[
          Page1(),
          Page1(),
          Page1(),
        ],
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  Page1({Key key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true);
    _controller.play();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          } else {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          }
        },
      ),
    );
  }
}