优美的应用体验 来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维，不局限于思维，不局限语言限制，才是编程的最高境界。
本文章讲述 Flutter 跨平台开发中 PageView的详细配置使用。
在这里插入图片描述PageView可用于Widget的整屏滑动切换，如当代常用的短视频APP中的上下滑动切换的功能，也可用于横向页面的切换，如APP第一次安装时的引导页面，也可用于开发轮播图功能
1、PageView 实现的轮播图
2、PageView实现的轮播图 第二篇
3、PageView 实现的左右滑动切换视图
在这里我们以单页面做为启动应用程序Demo，构建如下：
代码语言：txt复制//应用入口
void main() {
///启动根目录
runApp(MaterialApp(
theme: ThemeData(primaryColor: Colors.grey[200]),
home: Example508(),
));
}
///代码清单 5-34 PageView的基本使用
///lib/code/code5/example_508_PageView.dart
class Example508 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ExampleState();
}
}定义一个PageController，用来操作PageView或者监听PageView ，初始化方法如下：
代码语言：txt复制class Example508 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _ExampleState();
}
}
class _ExampleState extends State<Example508> {
/// 初始化控制器
PageController pageController;
//PageView当前显示页面索引
int currentPage = 0;
@override
void initState() {
super.initState();
//创建控制器的实例
pageController = new PageController(
//用来配置PageView中默认显示的页面 从0开始
initialPage: 0,
//为true是保持加载的每个页面的状态
keepPage: true,
);
///PageView设置滑动监听
pageController.addListener(() {
//PageView滑动的距离
double offset = pageController.offset;
//当前显示的页面的索引
double page = pageController.page;
print("pageView 滑动的距离 $offset 索引 $page");
});
}
在这里插入图片描述当然在这里的Demo小编写成的是纵向的滑动，如这样的纵向滑动的一般是如整屏视屏播放，然后上下滑动切换。
然后在页面的主体我们就是构建了一个PageView，其详细概述如下：
代码语言：txt复制 @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PageView "),
),
body: Container(
height: 200,
child: PageView.builder(
//当页面选中后回调此方法
//参数[index]是当前滑动到的页面角标索引 从0开始
onPageChanged: (int index) {
print("当前的页面是 $index");
currentPage = index;
},
//值为flase时 显示第一个页面 然后从左向右开始滑动
//值为true时 显示最后一个页面 然后从右向左开始滑动
reverse: false,
//滑动到页面底部无回弹效果
physics: BouncingScrollPhysics(),
//纵向滑动切换
scrollDirection: Axis.vertical,
//页面控制器
controller: pageController,
//所有的子Widget
itemBuilder: (BuildContext context, int index) {
return Container(
//缩放的图片
width: MediaQuery.of(context).size.width,
child: Image.asset(
"assets/images/2.0x/banner3.webp",
),
);
},
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.arrow_upward),
onPressed: () {
//
if (currentPage > 0) {
//滚动到上一屏
pageController.animateToPage(
currentPage - 1,
curve: Curves.ease,
duration: Duration(milliseconds: 200),
);
}
},
),
);
}在这里的 floatingActionButton 悬浮按钮小编只是写了一个控制PageView上滑一个页面的功能，是PageController来操作的，详细方法描述如下：
代码语言：txt复制 void pageViewController() {
//动画的方式滚动到指定的页面
pageController.animateToPage(
//子Widget的索引
0,
//动画曲线
curve: Curves.ease,
//滚动时间
duration: Duration(milliseconds: 200),
);
//动画的方式滚动到指定的位置
pageController.animateTo(
100,
//动画曲线
curve: Curves.ease,
//滚动时间
duration: Duration(milliseconds: 200),
);
//无动画切换到指定的页面
pageController.jumpToPage(0);
//无动画 切换到指定的位置
pageController.jumpTo(100);
}【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注
【x2】各种系列的视频教程 免费开源 关注 你不会迷路
【x3】系列文章 百万 Demo 随时 复制粘贴 使用
【x4】简短的视频不一样的体验
