我正在使用 Flutter 开发一个 APP。在 APP 中有一个 PageViews 列表，每个 PageView 在出现时都会加载和播放视频。当视频消失时，任何 PageView 都会停止播放视频。现在我有一个问题。当我在 PageViews 之间缓慢滑动时，会同时出现两个 PageView。每个 PageView 出现一个部分。但是两个PageView都在播放视频。我想知道我是否可以检查当前的PageView是否完全消失，然后我停止播放视频。当下一个 PageView 完全显示时，它开始播放视频。所以它不会同时在两个 PageView 中播放视频。任何人都可以帮助我吗？
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();
}
}
最佳答案
使用 PageController 检查页面是否完全转动。
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
import 'package:sprintf/sprintf.dart';
import 'package:preload_page_view/preload_page_view.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> {
PreloadPageController _controller;
int current = 0;
bool isOnPageTurning = false;
void scrollListener() {
if (isOnPageTurning &&
_controller.page == _controller.page.roundToDouble()) {
setState(() {
current = _controller.page.toInt();
isOnPageTurning = false;
});
} else if (!isOnPageTurning && current.toDouble() != _controller.page) {
if ((current.toDouble() - _controller.page).abs() > 0.1) {
setState(() {
isOnPageTurning = true;
});
}
}
}
@override
void initState() {
super.initState();
_controller = PreloadPageController();
_controller.addListener(scrollListener);
}
@override
Widget build(BuildContext context) {
return PreloadPageView.builder(
controller: _controller,
scrollDirection: Axis.vertical,
preloadPagesCount: 3,
itemBuilder: (context, pageIndex) {
return VideoApp(
pageIndex: pageIndex,
currentPageIndex: current,
isPaused: isOnPageTurning,
);
},
);
}
}
class VideoApp extends StatefulWidget {
VideoApp({
this.pageIndex,
this.currentPageIndex,
this.isPaused,
});
final int pageIndex;
final int currentPageIndex;
final bool isPaused;
@override
_VideoAppState createState() => _VideoAppState();
}
class _VideoAppState extends State<VideoApp> {
VideoPlayerController _controller;
bool initialized = false;
@override
void initState() {
super.initState();
print(sprintf("init: %d", [widget.pageIndex]));
_controller = VideoPlayerController.network(
"http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4")
..initialize().then((_) {
setState(() {
_controller.setLooping(true);
initialized = true;
});
});
}
@override
Widget build(BuildContext context) {
if (widget.pageIndex == widget.currentPageIndex &&
!widget.isPaused &&
initialized) {
_controller.play();
} else {
_controller.pause();
}
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blueAccent,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('is paused: ${widget.isPaused.toString()}'),
Text('currentPageIndex: ${widget.currentPageIndex.toString()}'),
Text('pageIndex: ${widget.pageIndex.toString()}'),
_controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(
decoration: BoxDecoration(color: Colors.black),
),
],
),
),
),
);
}
@override
void dispose() {
print(sprintf("dispose: %d", [widget.pageIndex]));
super.dispose();
_controller.dispose();
}
}
...
如果其他人正在寻找相同的答案，则使用的软件包是:
video_player: ^0.10.1+3
http: ^0.12.0+2
sprintf: ^4.0.2
preload_page_view: ^0.1.4
关于flutter - 如何检查当前PageView是否完全消失而下一个完全出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59664024/