【Flutter学习】基本组件之基本滑动PageView组件
一,概述
PageView 是一个滑动视图列表,它也是继承至 CustomScrollView 的。
二,构造函数
- 类命构造函数(PageView)
- PageView
- 使用场景:创建一个可滚动列表
- 构造函数
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,
}) : controller = controller ?? _defaultPageController,
childrenDelegate = SliverChildListDelegate(children),
super(key: key);
- PageView
- 命名构造函数
- PageView.builder
- 使用场景:创建一个滚动列表,指定数量
- 重要参数:
typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);
* @required IndexedWidgetBuilder itemBuilder : 构建子控件
* typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index); 构建子控件的数目- 构造函数
PageView.builder({
Key key,
this.scrollDirection = Axis.horizontal,
this.reverse = false,
PageController controller,
this.physics,
this.pageSnapping = true,
this.onPageChanged,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
this.dragStartBehavior = DragStartBehavior.start,
}) : controller = controller ?? _defaultPageController,
childrenDelegate = SliverChildBuilderDelegate(itemBuilder, childCount: itemCount),
super(key: key);
- PageView.custom
- 使用场景:创建一个可滚动的列表,自定义子项
构造函
- 重要参数:
* final SliverChildDelegate childrenDelegate;使用代理的方式构建子类列表
- 构造函数
PageView.custom({ Key key,
this.scrollDirection = Axis.horizontal,
this.reverse = false,
PageController controller,
this.physics,
this.pageSnapping = true,
this.onPageChanged,
@required this.childrenDelegate,
this.dragStartBehavior = DragStartBehavior.start,
}) : assert(childrenDelegate != null),
controller = controller ?? _defaultPageController,
super(key: key);
- 使用场景:创建一个可滚动的列表,自定义子项
三,参数解析
- final Axis scrollDirection: 视图滚动的方向。Defaults to [Axis.horizontal]
- final bool reverse:是否反转方向。 Defaults to false
- ScrollDirection 为 [Axis.horizontal]时,
Reverse为false时,从左到右开始;
Reverse为true时, 从右到左开始; - ScrollDirection 为 [Axis.vertical]时,
Reverse为false时,从上到下开始;
Reverse为true时, 从下到上开始;
- ScrollDirection 为 [Axis.horizontal]时,
- final PageController controller:控制台。用于监听视图的滚动情况。页面视图应该如何响应用户输入。例如,确定用户停止拖动页视图后,页视图如何继续动画。
- final ValueChanged<int> onPageChanged:索引改变时触发。
- final bool pageSnapping:设置为 false 以禁用页面捕捉,对自定义滚动行为很有用。
- final ScrollPhysics physics:页面视图如何响应用户输入,即滚动的动画表现。
- final DragStartBehavior dragStartBehavior:确定处理拖动开始行为的方式
四,示例demo
- demo
import 'package:flutter/material.dart'; void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new MyPageHome(title: 'pageViewDemo',),
);
}
} class MyPageHome extends StatefulWidget { //属性
String title;
//构造函数
MyPageHome({Key key,this.title}):super(key:key); @override
State<StatefulWidget> createState() {
// TODO: implement createState
return new MyPageHomeState();
}
} class MyPageHomeState extends State<MyPageHome> {
@override
Widget build(BuildContext context) { return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title)
), body: new Center(
child: new Container(
width: ,
height: ,
child: new PageView(
children: <Widget>[
Image.network('https://ws1.sinaimg.cn/large/0065oQSqgy1fwgzx8n1syj30sg15h7ew.jpg'),
Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fw8wzdua6rj30sg0yc7gp.jpg'),
Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fw0vdlg6xcj30j60mzdk7.jpg'),
Image.network('https://ws1.sinaimg.cn/large/0065oQSqly1fuo54a6p0uj30sg0zdqnf.jpg'),
],
),
),
),
);
}
}
- 效果图
五,官方文档
【Flutter学习】基本组件之基本滑动PageView组件的更多相关文章
- Flutter学习笔记(24)--SingleChildScrollView滚动组件
如需转载,请注明出处:Flutter学习笔记(23)--多 在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做 ...
- Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解
如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...
- Flutter学习笔记(18)--Drawer抽屉组件
如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...
- Flutter学习笔记(13)--表单组件
如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...
- 【Flutter学习】页面布局之基础布局组件
一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
- Flutter学习笔记(12)--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- Flutter学习笔记(14)--StatefulWidget简单使用
如需转载,请注明出处:Flutter学习笔记(14)--StatefulWidget简单使用 今天上班没那么忙,突然想起来我好像没StatefulWidget(有状态组件)的demo,闲来无事,写一个 ...
- Qt qml pageview 左右滑动分页组件
[先看效果] [下载]http://download.csdn.net/detail/surfsky/8516949 [调用] 分页视图 左右分页滑动列表组件 示例 PageView{ id: pv ...
- Flutter学习笔记(9)--组件Widget
如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...
随机推荐
- 【CF1256】Codeforces Round #598 (Div. 3) 【思维+贪心+DP】
https://codeforces.com/contest/1256 A:Payment Without Change[思维] 题意:给你a个价值n的物品和b个价值1的物品,问是否存在取物方案使得价 ...
- intellijidea 设置字体等
http://blog.csdn.net/asmcvc/article/details/17144951 1.下载安装AndroidStudio:http://developer.android.co ...
- Classic IPC Problems 经典的进程间通信问题
The Producer-Consumer Problem Presenter Notes: 生产者消费者问题(英语:Producer-consumer problem),也称有限缓冲问题(英语:Bo ...
- apm 应用性能管理(启动优化/ 掉帧卡顿/ 耗电/ 内存泄漏等)
APM 首先查看各个阶段耗时 : (环境变量设置 dyldPRINTSTATISTICS = 1选项,) 1. 启动优化 关键: 找到耗时的原因 t总 = t1 (premain) + t1(main ...
- 4.tensorflow——CNN
1.CNN结构:X-->CONV(relu)-->MAXPOOL-->CONV(relu)-->FC(relu)-->FC(softmax)-->Y 1.1 卷积层 ...
- 苹果系统下的浏览器 Date方法处理
1.做了一个活动,需要用到倒计时.比较坑的是苹果下的浏览器不识别new Date("2018-12-23 10:00:00").getTime()格式.所以孕育了一个bug小生命. ...
- python3-三个demo带你入门装饰器
装饰器入门 在不修改程序源代码和程序调用方式的情况下,扩展程序功能时不得不用到装饰器. python中的装饰器可谓功能强大,强大到刚接触它就被它弄得措手不及. 但是,静下心来好好研究,那可是回味无穷. ...
- python-django之cookie及session
Cookie Cookie的由来 Http协议是无状态的 无状态的意思是每次都是独立的请求存在,它的执行情况和结果与前面的请求和后面的请求都无直接关系,它不会受到前面的请求响应情况直接影响,也不会直接 ...
- 转 linux 服务器内存占用统计
linux 服务器内存占用统计 原文: https://www.cnblogs.com/eaglediao/p/6641811.html 当前内存占用率的计算,是根据top命令显示的Mem.used ...
- ubuntu中下载pycharm并添加到桌面
方法一:下载Pycharm与安装 下载地址:https://www.jetbrains.com/pycharm/ Pycharm专业版和社区版对大多数人来说差别不大,区别如下: 我们下载Linux的社 ...