Flutter開(kāi)發(fā)Widgets?之?PageView使用示例
構(gòu)造方法以及參數(shù)：
PageView可用于Widget的整屏滑動(dòng)切換，如當(dāng)代常用的短視頻APP中的上下滑動(dòng)切換的功能，也可用于橫向頁(yè)面的切換，如APP第一次安裝時(shí)的引導(dǎo)頁(yè)面，也可用于開(kāi)發(fā)輪播圖功能.
PageView({
Key? key,
this.scrollDirection = Axis.horizontal, // 設(shè)置滾動(dòng)方向 垂直 / 水平
this.reverse = false, // 反向滾動(dòng)
PageController? controller, // 滾動(dòng)控制類(lèi)
this.physics, // 滾動(dòng)邏輯 , 不滾動(dòng) / 滾動(dòng) / 滾動(dòng)到邊緣是否反彈
this.pageSnapping = true, // 如果設(shè)置 false , 則無(wú)法進(jìn)行頁(yè)面手勢(shì)捕捉
this.onPageChanged, // 頁(yè)面切換時(shí)回調(diào)該函數(shù)
List<Widget> children = const <Widget>[],
this.dragStartBehavior = DragStartBehavior.start,
this.allowImplicitScrolling = false,
this.restorationId,
this.clipBehavior = Clip.hardEdge,
}) : assert(allowImplicitScrolling != null),
assert(clipBehavior != null),
controller = controller ?? _defaultPageController,
childrenDelegate = SliverChildListDelegate(children),
super(key: key);
具體參數(shù)說(shuō)明：
scrollDirection主要是滾動(dòng)的方向即horizontal(水平)和vertical(垂直)兩個(gè)，默認(rèn)是horizontal的
reverse這個(gè)就是規(guī)定了children(子節(jié)點(diǎn))的排序是否是倒序，默認(rèn)false。這個(gè)參數(shù)在ListView也有，一般在做IM工具聊天內(nèi)容用ListView展示時(shí)需要倒序展示的。
controller可以傳入一個(gè)PageController的實(shí)例進(jìn)去，可以更好的控制PageView的各種動(dòng)作，可以設(shè)置：
- 初始頁(yè)面(initialPage)、
- 是否保存PageView狀態(tài)(keepPage)
- 每一個(gè)PageView子節(jié)點(diǎn)的內(nèi)容占改視圖的比例(viewportFraction)
- 直接調(diào)轉(zhuǎn)到指定的PageView的子節(jié)點(diǎn)的方法（jumpToPage
- 動(dòng)畫(huà)(平滑移動(dòng))到指定的PageView的子節(jié)點(diǎn)的方法（animateToPage）
- 到下一個(gè)PageView的子節(jié)點(diǎn)的方法(nextPage)
- 到上一個(gè)PageView的子節(jié)點(diǎn)的方法(previousPage)
從以上可以看出基本是普通輪播圖組件的API
physics就是設(shè)置滑動(dòng)效果：
- NeverScrollablePhysics表示設(shè)置的不可滾動(dòng)
- BouncingScrollPhysics表示滾動(dòng)到底了會(huì)有彈回的效果，就是iOS的默認(rèn)交互
- ClampingScrollPhysics表示滾動(dòng)到底了就給一個(gè)效果，就是Android的默認(rèn)交互
- FixedExtentScrollPhysics就是ios經(jīng)典選擇時(shí)間組件UIDatePicker那種交互。
pageSnapping就是設(shè)置是不是整頁(yè)滾動(dòng)，默認(rèn)是true.
dragStartBehavior這個(gè)屬性是設(shè)置認(rèn)定開(kāi)始拖動(dòng)行為的方式，可以選擇的是down和start兩個(gè)，默認(rèn)是start. down是第一個(gè)手指按下認(rèn)定拖動(dòng)開(kāi)始，start是手指拖動(dòng)才算開(kāi)始。
allowImplicitScrolling這個(gè)屬性一般提供給視障人士使用的，默認(rèn)是fasle
基本用法
PageView控件可以實(shí)現(xiàn)一個(gè)“圖片輪播”的效果，PageView不僅可以水平滑動(dòng)也可以垂直滑動(dòng)，簡(jiǎn)單用法如下：
PageView(
children: [
Container(color: Colors.red,),
Container(color: Colors.black,),
Container(color: Colors.yellow,),
],
);
PageView滾動(dòng)方向默認(rèn)是水平，可以設(shè)置其為垂直方向：
PageView(
scrollDirection: Axis.vertical,
...
)
PageView配合PageController可以實(shí)現(xiàn)非?？犰诺男Ч?，控制每一個(gè)Page不占滿(mǎn)，
Container(
height:200 ,
child: PageView(
scrollDirection: Axis.horizontal,
controller: PageController(viewportFraction: 0.9),
children: [
Container(color: Colors.red,),
Container(color: Colors.black,),
Container(color: Colors.yellow,),
],
),
);
PageController中屬性initialPage表示當(dāng)前加載第幾頁(yè),默認(rèn)第一頁(yè)。
onPageChanged屬性是頁(yè)面發(fā)生變化時(shí)的回調(diào)，用法如下：
無(wú)限滾動(dòng)
PageView滾動(dòng)到最后時(shí)希望滾動(dòng)到第一個(gè)頁(yè)面，這樣看起來(lái)PageView是無(wú)限滾動(dòng)的：
List<Widget> pageList = [PageView1(), PageView2(), PageView3()];
PageView.builder(
itemCount: 10000,
itemBuilder: (context, index) {
return pageList[index % (pageList.length)];
},
)
實(shí)現(xiàn)指示器
指示器顯示總數(shù)和當(dāng)前位置，通過(guò)onPageChanged確定當(dāng)前頁(yè)數(shù)并更新指示器。
int _currentPageIndex = 0;
List<Widget> pageList = [ Container(color: Colors.red,),
Container(color: Colors.black,),
Container(color: Colors.yellow,),];
_buildPageView(){
return Center(
child: Container(
height: 230,
child: Stack(
children: [
PageView.builder(itemBuilder: (context,index){
var val = pageList[index%(pageList.length)];
print(val);
return _buildPageViewItem('${val}');
}),
Positioned(
bottom: 20,
left: 0,
right: 0,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(pageList.length, (i){
return Container(
margin: EdgeInsets.symmetric(horizontal: 5),
width: 10,
height: 10,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentPageIndex==i?Colors.blue:Colors.grey
),
);
}).toList(),
),
)
)
],
),
),
);
}
_buildPageViewItem(String txt,{Color color=Colors.red}){
return Container(
color: color,
alignment: Alignment.center,
child: Text(txt,style: TextStyle(color: Colors.white,fontSize: 25),),
);
}
切換動(dòng)畫(huà)
如此常見(jiàn)的切換效果顯然不能體驗(yàn)我們獨(dú)特的個(gè)性，我們需要更炫酷的方式，看下面的效果：
在滑出的時(shí)候當(dāng)前頁(yè)面逐漸縮小并居中，通過(guò)給PageController添加監(jiān)聽(tīng)獲取當(dāng)前滑動(dòng)的進(jìn)度：
_pageController.addListener(() {
setState(() {
_currPageValue = _pageController.page;
});
});
全部代碼：
/**
* @Author wywinstonwy
* @Date 2022/10/05 9:50 上午
* @Description:
*/
import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';
class WyPageView1 extends StatefulWidget {
const WyPageView1({Key? key}) : super(key: key);
@override
_WyPageViewState createState() => _WyPageViewState();
}
class _WyPageViewState extends State<WyPageView1> {
int _currentPageIndex = 0;
var imgList = [
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2877516247,37083492&fm=26&gp=0.jpg',
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582796218195&di=04ce93c4ac826e19067e71f916cec5d8&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F344fda8b47808261c946c81645bff489c008326f15140-koiNr3_fw658'
];
late PageController _pageController;
var _currPageValue=0;
//縮放系數(shù)
double _scaleFactor = .8;
//view page height
double _height = 230.0;
@override
void initState() {
// TODO: implement initState
super.initState();
_pageController=PageController(viewportFraction: 0.9);
_pageController.addListener(() {
setState(() {
_currPageValue = _pageController.page;
});
});
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_pageController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: getAppBar('PageView'),
body: Container(
height: _height,
child: PageView.builder(
itemBuilder: (context, index) => _buildPageItem(index),
itemCount: 10,
controller: _pageController,
)),
);
}
_buildPageItem(int index) {
Matrix4 matrix4 = Matrix4.identity();
if (index == _currPageValue.floor()) {
//當(dāng)前的item
double currScale = (1 - (_currPageValue - index) * (1 - _scaleFactor)).toDouble();
var currTrans = _height * (1 - currScale) / 2;
matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
..setTranslationRaw(0.0, currTrans, 0.0);
} else if (index == _currPageValue.floor() + 1) {
//右邊的item
var currScale =
_scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
var currTrans = _height * (1 - currScale) / 2;
matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
..setTranslationRaw(0.0, currTrans, 0.0);
} else if (index == _currPageValue.floor() - 1) {
//左邊
var currScale = (1 - (_currPageValue - index) * (1 - _scaleFactor)).toDouble();
var currTrans = _height * (1 - currScale) / 2;
matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
..setTranslationRaw(0.0, currTrans, 0.0);
} else {
//其他，不在屏幕顯示的item
matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
..setTranslationRaw(0.0, _height * (1 - _scaleFactor) / 2, 0.0);
}
return Transform(
transform: matrix4,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: NetworkImage(imgList[index % 2]), fit: BoxFit.fill),
),
),
),
);
}
}
gitdemo地址：gitee.com/wywinstonwy…
總結(jié)：
相比熟悉Android和IOS開(kāi)發(fā)的同學(xué)都會(huì)比較熟悉ViewPager，可以在界面上滑動(dòng)多個(gè)界面View的切換。在Flutter中同樣有這樣的組建那就是PageView,相比于ViewPager它有著更加強(qiáng)大的功能，畢竟Flutter中Widget是一等公民，在實(shí)際開(kāi)發(fā)中也是比較實(shí)用的組件，可以提升開(kāi)發(fā)效率。
以上就是Flutter開(kāi)發(fā)Widgets 之 PageView使用示例的詳細(xì)內(nèi)容，更多關(guān)于Flutter開(kāi)發(fā)Widgets PageView的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- Flutter?Widget?之package?mason實(shí)現(xiàn)詳解
- Flutter?Widget?之FocusableActionDetector使用詳解
- Flutter?Widget?之StatefulBuilder構(gòu)建方法詳解
- flutter InheritedWidget使用方法總結(jié)
- Flutter Widgets MediaQuery控件屏幕信息適配
- Flutter Widgets粘合劑CustomScrollView NestedScrollView滾動(dòng)控件
- Flutter?Widgets之標(biāo)簽類(lèi)控件Chip詳解
- Flutter?Widget之FutureBuilder使用示例詳解
相關(guān)文章
Objective-C中類(lèi)和方法的定義以及協(xié)議的使用
這篇文章主要介紹了Objective-C中類(lèi)和方法的定義以及協(xié)議的使用,配合Mac下的Xcode IDE進(jìn)行講解,需要的朋友可以參考下2016-01-01
UIStackView主要包括了四大屬性：axis、alignment、distribution、spacing。下面通過(guò)本文給大家介紹iOS9新特性之UIStackView的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-09-09
UITextView實(shí)現(xiàn)只允許鏈接交互不允許選擇圖片的方法
這篇文章主要介紹了UITextView實(shí)現(xiàn)只允許鏈接交互不允許選擇圖片的方法，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
iOS自定義日期、時(shí)間、城市選擇器實(shí)例代碼
這篇文章主要介紹了iOS自定義日期、時(shí)間、城市選擇器實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
關(guān)于打包上傳至AppStore，大家都認(rèn)為是最后一步了，其實(shí)到了這里往往會(huì)遇到很多的坑。對(duì)于踩過(guò)的坑我不想再踩第二遍，所以在此將我遇到的所有奇葩問(wèn)題在此做一個(gè)記錄，當(dāng)作對(duì)自己的一個(gè)提醒，同時(shí)也分享給給位，需要的朋友可以參考下。2017-03-03
本文通過(guò)實(shí)例代碼給大家介紹了iOS 獲得現(xiàn)在的時(shí)間的方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-06-06
詳解iOS應(yīng)用使用Storyboard布局時(shí)的IBOutlet與IBAction
這篇文章主要介紹了iOS應(yīng)用使用Storyboard布局時(shí)的IBOutlet與IBAction,文中還附帶講解了為什么IBOutlet屬性是weak的,需要的朋友可以參考下2016-04-04
詳解iOS App中UiTabBarController組件的基本用法
UiTabBarController組件即是用來(lái)創(chuàng)建App中的Tab視圖切換選項(xiàng)欄,下面將詳解iOS App中UiTabBarController組件的基本用法,包括左右滑動(dòng)切換標(biāo)簽頁(yè)等基本功能的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05
iOS實(shí)現(xiàn)手動(dòng)和自動(dòng)屏幕旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)手動(dòng)和自動(dòng)屏幕旋轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
實(shí)例講解iOS應(yīng)用UI開(kāi)發(fā)之基礎(chǔ)動(dòng)畫(huà)的創(chuàng)建
這篇文章主要介紹了iOS應(yīng)用UI開(kāi)發(fā)之基礎(chǔ)動(dòng)畫(huà)的創(chuàng)建,以關(guān)鍵幀動(dòng)畫(huà)作為重要知識(shí)點(diǎn)進(jìn)行講解,需要的朋友可以參考下2015-11-11