AndroidFlutter實(shí)現(xiàn)視頻上滑翻頁效果的示例代碼

第AndroidFlutter實(shí)現(xiàn)視頻上滑翻頁效果的示例代碼目錄前言PageView組件介紹使用示例PageController應(yīng)用

前言

我們在短視頻應(yīng)用中經(jīng)常會看到不停上滑瀏覽下一條視頻的沉浸式交互效果，這種交互能夠讓用戶不停地翻頁，直到找到喜歡的視頻內(nèi)容，從而營造一種不斷搜尋目標(biāo)的感覺，讓用戶欲罷不能。這種交互形式在Flutter中可以輕松使用PageView組件實(shí)現(xiàn)。

PageView組件介紹

PageView組件專門設(shè)計(jì)用來實(shí)現(xiàn)翻頁效果，類定義如下：

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：滑動方向，可以支持縱向翻頁或橫向翻頁，默認(rèn)是橫向翻頁。controller：翻頁控制器，可以通過控制器來制定初始頁，以及跳轉(zhuǎn)到具體的頁面。onPageChanged：翻頁后的回調(diào)函數(shù)，會告知翻頁后的頁碼。reverse：是否反向翻頁，默認(rèn)是false。如果橫向滑動翻頁的話，如果開啟反向翻頁，則是從右到左翻頁。如果是縱向翻頁的話，就是從頂部到底部翻頁。children：在翻頁中的組件列表，每一頁都以自定義組件內(nèi)容，因此這個組件也可以用于做引導(dǎo)頁，或是類似滑動查看詳情的效果。

使用示例

PageView使用起來非常簡單，我們先定義一個PageView翻頁的內(nèi)容組件，簡單地將接收的圖片文件滿屏顯示。代碼如下，實(shí)際應(yīng)用的時候可以根據(jù)需要換成其他自定義組件。

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來應(yīng)用PageView翻頁應(yīng)用示例，代碼如下：

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只是演示了設(shè)置初始頁碼。我們看到的viewportFraction可以理解為一頁內(nèi)容占據(jù)屏幕的比例，比如我們可以設(shè)置該數(shù)值為1/3，支持一個屏幕分段顯示3個頁面內(nèi)容。

PageController應(yīng)用

PageController可以控制滑動到指定位置，比如我們可以調(diào)用animateToPage方法實(shí)現(xiàn)一個快速滑動到頂部的懸浮按鈕。

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,

),

實(shí)現(xiàn)效果如下。

Page