Android Flutter實現(xiàn)視頻上滑翻頁效果的示例代碼
前言
我們在短視頻應用中經常會看到不停上滑瀏覽下一條視頻的沉浸式交互效果,這種交互能夠讓用戶不停地翻頁,直到找到喜歡的視頻內容,從而營造一種不斷“搜尋目標”的感覺,讓用戶欲罷不能。這種交互形式在 Flutter 中可以輕松使用 PageView
組件實現(xiàn)。
PageView 組件介紹
PageView
組件專門設計用來實現(xiàn)翻頁效果,類定義如下:
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, })
其中常用的屬性說明如下:
scrollDirection
:滑動方向,可以支持縱向翻頁或橫向翻頁,默認是橫向翻頁。controller
:翻頁控制器,可以通過控制器來制定初始頁,以及跳轉到具體的頁面。onPageChanged
:翻頁后的回調函數(shù),會告知翻頁后的頁碼。reverse
:是否反向翻頁,默認是false
。如果橫向滑動翻頁的話,如果開啟反向翻頁,則是從右到左翻頁。如果是縱向翻頁的話,就是從頂部到底部翻頁。children
:在翻頁中的組件列表,每一頁都以自定義組件內容,因此這個組件也可以用于做引導頁,或是類似滑動查看詳情的效果。
使用示例
PageView
使用起來非常簡單,我們先定義一個PageView
翻頁的內容組件,簡單地將接收的圖片文件滿屏顯示。代碼如下,實際應用的時候可以根據(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, ), ); } }
之后是定義一個 PageViewDemo
來應用 PageView
翻頁應用示例,代碼如下:
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'), ], ), ); } }
這個示例里,我們的 pageController
只是演示了設置初始頁碼。我們看到的 viewportFraction
可以理解為一頁內容占據(jù)屏幕的比例,比如我們可以設置該數(shù)值為1/3,支持一個屏幕分段顯示3個頁面內容。
PageController 應用
PageController
可以控制滑動到指定位置,比如我們可以調用 animateToPage
方法實現(xiàn)一個快速滑動到頂部的懸浮按鈕。
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, ), ),
實現(xiàn)效果如下。
PageController
還有如下控制翻頁的方法:
jumpToPage
:跳轉到指定頁面,但是沒有動畫。注意這里不會校驗頁碼是否會超出范圍。nextPage
:滑動到下一頁,實際上調用的是animateToPage
方法。previousPage
:滑動到上一頁,實際上調用的是animateToPage
方法。
到此這篇關于Android Flutter實現(xiàn)視頻上滑翻頁效果的示例代碼的文章就介紹到這了,更多相關Android Flutter上滑翻頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Android性能調優(yōu)利器StrictMode應用分析
StrictMode意思為嚴格模式,是用來檢測程序中違例情況的開發(fā)者工具。最常用的場景就是檢測主線程中本地磁盤和網絡讀寫等耗時的操作。這篇文章給大家介紹Android性能調優(yōu)利器StrictMode應用分析,感興趣的朋友一起看看吧2018-01-01Android自定義可點擊的ImageSpan并在TextView中內置View
這篇文章主要為大家詳細介紹了Android自定義可點擊的ImageSpan并在TextView中內置"View",具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11Android項目開發(fā) 教你實現(xiàn)Periscope點贊效果
這篇文章主要為大家分享了Android項目開發(fā),一步一步教你實現(xiàn)Periscope點贊效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-12-12Android Doze模式下Alarm定時任務實現(xiàn)流程詳解
這篇文章主要介紹了Android Doze模式下Alarm定時任務實現(xiàn),Android的定時任務有兩種,一種是JavaAPI提供的Timer類,另一種就是使用Android的Alarm機制2022-11-11Android水波紋載入控件CircleWaterWaveView使用詳解
這篇文章主要為大家詳細介紹了Android水波紋載入控件CircleWaterWaveView使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-01-01Android實現(xiàn)Toast提示框圖文并存的方法
這篇文章主要介紹了Android實現(xiàn)Toast提示框圖文并存的方法,實例分析了Toast提示框的參數(shù)設置及圖文調用的相關技巧,需要的朋友可以參考下2016-01-01