Android Flutter實(shí)現(xiàn)視頻上滑翻頁(yè)效果的示例代碼
前言
我們?cè)诙桃曨l應(yīng)用中經(jīng)常會(huì)看到不停上滑瀏覽下一條視頻的沉浸式交互效果,這種交互能夠讓用戶不停地翻頁(yè),直到找到喜歡的視頻內(nèi)容,從而營(yíng)造一種不斷“搜尋目標(biāo)”的感覺(jué),讓用戶欲罷不能。這種交互形式在 Flutter 中可以輕松使用 PageView
組件實(shí)現(xiàn)。
PageView 組件介紹
PageView
組件專(zhuān)門(mén)設(shè)計(jì)用來(lái)實(shí)現(xiàn)翻頁(yè)效果,類(lèi)定義如下:
PageView({ Key? key, this.scrollDirection = Axis.horizontal, this.reverse = false, PageController? controller, this.physics, this.pageSnapping = true, this.onPageChanged, List<Widget> children = const <Widget>[], this.dragStartBehavior = DragStartBehavior.start, this.allowImplicitScrolling = false, this.restorationId, this.clipBehavior = Clip.hardEdge, this.scrollBehavior, this.padEnds = true, })
其中常用的屬性說(shuō)明如下:
scrollDirection
:滑動(dòng)方向,可以支持縱向翻頁(yè)或橫向翻頁(yè),默認(rèn)是橫向翻頁(yè)。controller
:翻頁(yè)控制器,可以通過(guò)控制器來(lái)制定初始頁(yè),以及跳轉(zhuǎn)到具體的頁(yè)面。onPageChanged
:翻頁(yè)后的回調(diào)函數(shù),會(huì)告知翻頁(yè)后的頁(yè)碼。reverse
:是否反向翻頁(yè),默認(rèn)是false
。如果橫向滑動(dòng)翻頁(yè)的話,如果開(kāi)啟反向翻頁(yè),則是從右到左翻頁(yè)。如果是縱向翻頁(yè)的話,就是從頂部到底部翻頁(yè)。children
:在翻頁(yè)中的組件列表,每一頁(yè)都以自定義組件內(nèi)容,因此這個(gè)組件也可以用于做引導(dǎo)頁(yè),或是類(lèi)似滑動(dòng)查看詳情的效果。
使用示例
PageView
使用起來(lái)非常簡(jiǎn)單,我們先定義一個(gè)PageView
翻頁(yè)的內(nèi)容組件,簡(jiǎn)單地將接收的圖片文件滿屏顯示。代碼如下,實(shí)際應(yīng)用的時(shí)候可以根據(jù)需要換成其他自定義組件。
class ImagePageView extends StatelessWidget { final String imageName; const ImagePageView({Key? key, required this.imageName}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Image.asset( imageName, fit: BoxFit.fitHeight, width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).size.height, ), ); } }
之后是定義一個(gè) PageViewDemo
來(lái)應(yīng)用 PageView
翻頁(yè)應(yīng)用示例,代碼如下:
class PageViewDemo extends StatefulWidget { const PageViewDemo({Key? key}) : super(key: key); @override State<PageViewDemo> createState() => _PageViewDemoState(); } class _PageViewDemoState extends State<PageViewDemo> { late PageController _pageController; int _pageIndex = 1; @override void initState() { _pageController = PageController( initialPage: _pageIndex, viewportFraction: 1.0, ); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( 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'), ], ), ); } }
這個(gè)示例里,我們的 pageController
只是演示了設(shè)置初始頁(yè)碼。我們看到的 viewportFraction
可以理解為一頁(yè)內(nèi)容占據(jù)屏幕的比例,比如我們可以設(shè)置該數(shù)值為1/3,支持一個(gè)屏幕分段顯示3個(gè)頁(yè)面內(nèi)容。
PageController 應(yīng)用
PageController
可以控制滑動(dòng)到指定位置,比如我們可以調(diào)用 animateToPage
方法實(shí)現(xiàn)一個(gè)快速滑動(dòng)到頂部的懸浮按鈕。
floatingActionButton: FloatingActionButton( onPressed: () { _pageController.animateToPage( 0, duration: const Duration( milliseconds: 1000, ), curve: Curves.easeOut, ); }, backgroundColor: Colors.black.withAlpha(180), child: const Icon( Icons.arrow_upward, color: Colors.white, ), ),
實(shí)現(xiàn)效果如下。
PageController
還有如下控制翻頁(yè)的方法:
jumpToPage
:跳轉(zhuǎn)到指定頁(yè)面,但是沒(méi)有動(dòng)畫(huà)。注意這里不會(huì)校驗(yàn)頁(yè)碼是否會(huì)超出范圍。nextPage
:滑動(dòng)到下一頁(yè),實(shí)際上調(diào)用的是animateToPage
方法。previousPage
:滑動(dòng)到上一頁(yè),實(shí)際上調(diào)用的是animateToPage
方法。
到此這篇關(guān)于Android Flutter實(shí)現(xiàn)視頻上滑翻頁(yè)效果的示例代碼的文章就介紹到這了,更多相關(guān)Android Flutter上滑翻頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android性能調(diào)優(yōu)利器StrictMode應(yīng)用分析
StrictMode意思為嚴(yán)格模式,是用來(lái)檢測(cè)程序中違例情況的開(kāi)發(fā)者工具。最常用的場(chǎng)景就是檢測(cè)主線程中本地磁盤(pán)和網(wǎng)絡(luò)讀寫(xiě)等耗時(shí)的操作。這篇文章給大家介紹Android性能調(diào)優(yōu)利器StrictMode應(yīng)用分析,感興趣的朋友一起看看吧2018-01-01Android自定義可點(diǎn)擊的ImageSpan并在TextView中內(nèi)置View
這篇文章主要為大家詳細(xì)介紹了Android自定義可點(diǎn)擊的ImageSpan并在TextView中內(nèi)置"View",具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Android項(xiàng)目開(kāi)發(fā) 教你實(shí)現(xiàn)Periscope點(diǎn)贊效果
這篇文章主要為大家分享了Android項(xiàng)目開(kāi)發(fā),一步一步教你實(shí)現(xiàn)Periscope點(diǎn)贊效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12Android Doze模式下Alarm定時(shí)任務(wù)實(shí)現(xiàn)流程詳解
這篇文章主要介紹了Android Doze模式下Alarm定時(shí)任務(wù)實(shí)現(xiàn),Android的定時(shí)任務(wù)有兩種,一種是JavaAPI提供的Timer類(lèi),另一種就是使用Android的Alarm機(jī)制2022-11-11Android面向單Activity開(kāi)發(fā)示例解析
這篇文章主要為大家介紹了Android面向單Activity開(kāi)發(fā)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Android水波紋載入控件CircleWaterWaveView使用詳解
這篇文章主要為大家詳細(xì)介紹了Android水波紋載入控件CircleWaterWaveView使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01Android實(shí)現(xiàn)Toast提示框圖文并存的方法
這篇文章主要介紹了Android實(shí)現(xiàn)Toast提示框圖文并存的方法,實(shí)例分析了Toast提示框的參數(shù)設(shè)置及圖文調(diào)用的相關(guān)技巧,需要的朋友可以參考下2016-01-01