AndroidFlutter实现视频上滑翻页效果的示例代码

第AndroidFlutter实现视频上滑翻页效果的示例代码目录前言PageView组件介绍使用示例PageController应用

前言

我们在短视频应用中经常会看到不停上滑浏览下一条视频的沉浸式交互效果，这种交互能够让用户不停地翻页，直到找到喜欢的视频内容，从而营造一种不断搜寻目标的感觉，让用户欲罢不能。这种交互形式在Flutter中可以轻松使用PageView组件实现。

PageView组件介绍

PageView组件专门设计用来实现翻页效果，类定义如下：

PageView({

Keykey,

this.scrollDirection=Axis.horizontal,

this.reverse=false,

PageControllercontroller,

this.physics,

this.pageSnapping=true,

this.onPageChanged,

ListWidgetchildren=constWidget[],

this.dragStartBehavior=DragStartBehavior.start,

this.allowImplicitScrolling=false,

this.restorationId,

this.clipBehavior=Clip.hardEdge,

this.scrollBehavior,

this.padEnds=true,

})

其中常用的属性说明如下：

scrollDirection：滑动方向，可以支持纵向翻页或横向翻页，默认是横向翻页。controller：翻页控制器，可以通过控制器来制定初始页，以及跳转到具体的页面。onPageChanged：翻页后的回调函数，会告知翻页后的页码。reverse：是否反向翻页，默认是false。如果横向滑动翻页的话，如果开启反向翻页，则是从右到左翻页。如果是纵向翻页的话，就是从顶部到底部翻页。children：在翻页中的组件列表，每一页都以自定义组件内容，因此这个组件也可以用于做引导页，或是类似滑动查看详情的效果。

使用示例

PageView使用起来非常简单，我们先定义一个PageView翻页的内容组件，简单地将接收的图片文件满屏显示。代码如下，实际应用的时候可以根据需要换成其他自定义组件。

classImagePageViewextendsStatelessWidget{

finalStringimageName;

constImagePageView({Keykey,requiredthis.imageName}):super(key:key);

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

body:Image.asset(

imageName,

fit:BoxFit.fitHeight,

width:MediaQuery.of(context).size.width,

height:MediaQuery.of(context).size.height,

}

之后是定义一个PageViewDemo来应用PageView翻页应用示例，代码如下：

classPageViewDemoextendsStatefulWidget{

constPageViewDemo({Keykey}):super(key:key);

@override

StatePageViewDemocreateState()=_PageViewDemoState();

class_PageViewDemoStateextendsStatePageViewDemo{

latePageController_pageController;

int_pageIndex=1;

@override

voidinitState(){

_pageController=PageController(

initialPage:_pageIndex,

viewportFraction:1.0,

super.initState();

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

backgroundColor:Colors.black,

body:PageView(

scrollDirection:Axis.vertical,

onPageChanged:(index){

_pageIndex=index;

controller:_pageController,

allowImplicitScrolling:false,

padEnds:true,

reverse:false,

children:const[

ImagePageView(imageName:'images/earth.jpeg'),

ImagePageView(imageName:'images/island-coder.png'),

ImagePageView(imageName:'images/mb.jpeg'),

}

这个示例里，我们的pageController只是演示了设置初始页码。我们看到的viewportFraction可以理解为一页内容占据屏幕的比例，比如我们可以设置该数值为1/3，支持一个屏幕分段显示3个页面内容。

PageController应用

PageController可以控制滑动到指定位置，比如我们可以调用animateToPage方法实现一个快速滑动到顶部的悬浮按钮。

floatingActionButton:FloatingActionButton(

onPressed:(){

_pageController.animateToPage(

duration:constDuration(

milliseconds:1000,

curve:Curves.easeOut,

backgroundColor:Colors.black.withAlpha(180),

child:constIcon(

Icons.arrow_upward,

color:Colors.white,

),

实现效果如下。

Page