一,概述

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.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]时,

         Reversefalse时,从左到右开始;
         Reversetrue时, 从右到左开始;
    • ScrollDirection 为 [Axis.vertical]时,
         Reversefalse时,从上到下开始;
         Reversetrue时, 从下到上开始;
  • 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组件的更多相关文章

  1. Flutter学习笔记(24)--SingleChildScrollView滚动组件

    如需转载,请注明出处:Flutter学习笔记(23)--多 在我们实际的项目开发中,经常会遇到页面UI内容过多,导致手机一屏展示不完的情况出现,以Android为例,在Android中遇到这类情况的做 ...

  2. Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解

    如需转载,请注明出处:Flutter学习笔记(15)--MaterialApp应用组件及routes路由详解 最近一段时间生病了,整天往医院跑,也没状态学东西了,现在是好了不少了,也该继续学习啦!!! ...

  3. Flutter学习笔记(18)--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  4. Flutter学习笔记(13)--表单组件

    如需转载,请注明出处:Flutter学习笔记(13)--表单组件 表单组件是个包含表单元素的区域,表单元素允许用户输入内容,比如:文本区域,下拉表单,单选框.复选框等,常见的应用场景有:登陆.注册.输 ...

  5. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  6. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

  7. Flutter学习笔记(14)--StatefulWidget简单使用

    如需转载,请注明出处:Flutter学习笔记(14)--StatefulWidget简单使用 今天上班没那么忙,突然想起来我好像没StatefulWidget(有状态组件)的demo,闲来无事,写一个 ...

  8. Qt qml pageview 左右滑动分页组件

    [先看效果] [下载]http://download.csdn.net/detail/surfsky/8516949 [调用] 分页视图 左右分页滑动列表组件 示例 PageView{ id: pv ...

  9. Flutter学习笔记(9)--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

随机推荐

  1. 【CF1256】Codeforces Round #598 (Div. 3) 【思维+贪心+DP】

    https://codeforces.com/contest/1256 A:Payment Without Change[思维] 题意:给你a个价值n的物品和b个价值1的物品,问是否存在取物方案使得价 ...

  2. intellijidea 设置字体等

    http://blog.csdn.net/asmcvc/article/details/17144951 1.下载安装AndroidStudio:http://developer.android.co ...

  3. Classic IPC Problems 经典的进程间通信问题

    The Producer-Consumer Problem Presenter Notes: 生产者消费者问题(英语:Producer-consumer problem),也称有限缓冲问题(英语:Bo ...

  4. apm 应用性能管理(启动优化/ 掉帧卡顿/ 耗电/ 内存泄漏等)

    APM 首先查看各个阶段耗时 : (环境变量设置 dyldPRINTSTATISTICS = 1选项,) 1. 启动优化 关键: 找到耗时的原因 t总 = t1 (premain) + t1(main ...

  5. 4.tensorflow——CNN

    1.CNN结构:X-->CONV(relu)-->MAXPOOL-->CONV(relu)-->FC(relu)-->FC(softmax)-->Y 1.1 卷积层 ...

  6. 苹果系统下的浏览器 Date方法处理

    1.做了一个活动,需要用到倒计时.比较坑的是苹果下的浏览器不识别new Date("2018-12-23 10:00:00").getTime()格式.所以孕育了一个bug小生命. ...

  7. python3-三个demo带你入门装饰器

    装饰器入门 在不修改程序源代码和程序调用方式的情况下,扩展程序功能时不得不用到装饰器. python中的装饰器可谓功能强大,强大到刚接触它就被它弄得措手不及. 但是,静下心来好好研究,那可是回味无穷. ...

  8. python-django之cookie及session

    Cookie Cookie的由来 Http协议是无状态的 无状态的意思是每次都是独立的请求存在,它的执行情况和结果与前面的请求和后面的请求都无直接关系,它不会受到前面的请求响应情况直接影响,也不会直接 ...

  9. 转 linux 服务器内存占用统计

    linux 服务器内存占用统计  原文: https://www.cnblogs.com/eaglediao/p/6641811.html 当前内存占用率的计算,是根据top命令显示的Mem.used ...

  10. ubuntu中下载pycharm并添加到桌面

    方法一:下载Pycharm与安装 下载地址:https://www.jetbrains.com/pycharm/ Pycharm专业版和社区版对大多数人来说差别不大,区别如下: 我们下载Linux的社 ...