Flutter PageView 使用详细概述

优美的应用体验来自于细节的处理，更源自于码农的自我要求与努力，当然也需要码农年轻灵活的思维，不局限于思维，不局限语言限制，才是编程的最高境界。

本文章讲述 Flutter 跨平台开发中 PageView的详细配置使用。

PageView可用于Widget的整屏滑动切换，如当代常用的短视频APP中的上下滑动切换的功能，也可用于横向页面的切换，如APP第一次安装时的引导页面，也可用于开发轮播图功能

1、PageView 实现的轮播图

2、PageView实现的轮播图第二篇

3、PageView 实现的左右滑动切换视图

在这里我们以单页面做为启动应用程序Demo，构建如下：

//应用入口
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 {@overrideState<StatefulWidget> createState() {return _ExampleState();}
}

定义一个PageController，用来操作PageView或者监听PageView ，初始化方法如下：

class Example508 extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _ExampleState();}
}class _ExampleState extends State<Example508> {/// 初始化控制器PageController pageController;//PageView当前显示页面索引int currentPage = 0;@overridevoid 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，其详细概述如下：

  @overrideWidget 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,//所有的子WidgetitemBuilder: (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来操作的，详细方法描述如下：

  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】简短的视频不一样的体验

不局限于思维，不局限语言限制，才是编程的最高境界。

以小编的性格，肯定是要录制一套视频的，随后会上传

有兴趣你可以关注一下西瓜视频 — 早起的年轻人

Flutter PageView 使用详细概述相关推荐

Flutter MaterialButton组件详细概述
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1]微信公众号的每日提醒随时随记每日积累随心 ...
EJB是什么Java使用EJB容器的详细概述
EJB是什么博客分类: java EJB 最近项目中接触到EJB,但对EJB不是很了解,于是网上找了些资料参考,下面这篇是个人感觉讲的比较清晰的,遂转载一起参考,文章转自https://www.c ...
西门子精智和精简面板区别_西门子精智面板6AV2124-0QC02-0AX1详细概述
西门子精智面板6AV2124-0QC02-0AX1详细概述3fte 上海铁狂机电设备有限公司是一家多年从事大型系统备件(集散式控制系统.可编程控制器.冗余容错控制系统.机器人控制系统.大型伺服控制系统 ...
西门子精智和精简面板区别_西门子精智面板6AV2124-0GC01-0AX0详细概述
西门子精智面板6AV2124-0GC01-0AX0详细概述3fte 上海铁狂机电设备有限公司是一家多年从事大型系统备件(集散式控制系统.可编程控制器.冗余容错控制系统.机器人控制系统.大型伺服控制系统 ...
Flutter Duration详细概述
在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天.每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不 ...
Flutter PageView 属性使用详解
PageView.builder({Key? key,this.scrollDirection = Axis.horizontal,this.reverse = false,PageControlle ...
Flutter PageView 实现的自动轮播图效果 Timer实现的自动轮播效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注 [x2] ...
Flutter PageView左右滑动切换视图
本文将通过 PageView 实现页面的整页横向切换. 1 PageView 的基本使用 ///封装方法构建PageView组件PageView buildBodyFunction() {///可实现 ...
flutter PageView上下滑动切换视图
上下滑动切换的 pageview import 'dart:math';import 'package:cached_network_image/cached_network_image.dart'; ...

Flutter PageView 使用详细概述

Flutter PageView 使用详细概述相关推荐

最新文章

热门文章