PageVIew,可滚动的视图列表组件,而且每一个子组件的大小都和视图窗口大小一样。

属性:

  • controller -> PageController 用于控制视图页面滚动到的位置
  • children 视图页面列表
  • scrollDirection 页面滚动的方向,从左往右,或者从上往下
  • onPageChanged 视图页面发生转换的时候进行的函数操作
  • reverse 对视图页面的排列顺序进行反转

效果:

PageView的用法

在项目的main.dart中的代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.pink,
),
home: MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget { @override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo Code',style: TextStyle(color: Colors.white),),
centerTitle: true,
),
body: Container(
height: 500.0,//确保pageview的高度
child: PageView(
controller: PageController(
initialPage: 0,//让初始页为第一个pageview的实例
viewportFraction: 1.0//让页面视图充满整个视图窗口 即充满400px高的视图窗口
),
children: <Widget>[
Container(
color: Colors.yellow,
child: Center(
child: Text('这是第一个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
),
),
Container(
color: Colors.red,
child: Center(
child: Text('这是第二个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
),
),
Container(
color: Colors.green,
child: Center(
child: Text('这是第三个pageView的实例',style: TextStyle(color: Colors.white,fontSize: 20.0),),
),
)
],
scrollDirection: Axis.vertical,//上下滚动
onPageChanged: (int index) {
print('这是第${index}个页面');
},
reverse: false,//是否反转页面的顺序
),
),
);
}
}

如果container的高度500没有设置的话,每个页面的大小将是手机的可视高度。

如果controller中的initialPage设置为1,则当前显示的页面时第二个页面

viewprotFraction的默认值为1.0,表示页面视图充满整个父容器。若是0.5,则页面视图的高度是父容器高度的一半。

Flutter中的可滚动列表组件-PageView的更多相关文章

  1. Flutter中通过循环渲染组件

    class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...

  2. Flutter 中那么多组件,难道要都学一遍?

    在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...

  3. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

  4. 【Flutter学习】可滚动组件之ScrollView

    一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直 ...

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

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

  6. 【Flutter学习】可滚动组件之滚动监听及控制

    一,概述 ScrollController可以用来控制可滚动widget的滚动位置 二,ScrollController 构造函数 ScrollController({ double initialS ...

  7. Flutter 实战(一):列表项内容可自定义的列表组件

    前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...

  8. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  9. 在Flutter中嵌入Native组件的正确姿势是...

    引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...

随机推荐

  1. Chef vs Puppet vs Ansible vs Saltstack: Which Works Best For You?

    Ansible vs SaltStack 谁才是自动化运维好帮手? - CSDN博客 https://blog.csdn.net/a105421548/article/details/53558598 ...

  2. HDU5015 233 Matrix —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/HDU-5015 233 Matrix Time Limit: 10000/5000 MS (Java/Others)    Memor ...

  3. MYSQL进阶学习笔记十五:MySQL 的账号权限赋予!(视频序号:进阶_33,34)

    知识点十六:MySQL的账号权限赋予(33) 一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执 ...

  4. xml文件的解析(用dom4j解析)

    有个第三方的包,用来解析.xml文件比较方便,它是DOM4J.由于是第三方的,所以要使用它就要先下载,并包含进来.步骤: 1.打开dom4j官网,这里下载最新版dom4j-2.1.1.jar. 2.新 ...

  5. java IO流文件的读写具体实例(转载)

    引言: 关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽.上次突然一个同事问了我java文件的读取,我一下子就懵了第一反应就是去网上找,虽然也能 ...

  6. hdu 1205 吃糖果(抽屉原理)

    题意:N种糖果,不能把一样的放在一起吃,即第一次吃一种,下一次吃另一种. 思路:找到个数最多的糖果种类(最大的数目记作 ma,该糖果种类记为a),首先把这n个糖果放到n个抽屉里面,然后把剩余的N-1种 ...

  7. 如何修改Windows的默认安装路径

    运行中输入regedit打开注册表编辑器 展开注册表“HKEY_LOCAL_MACHINE\Software\Microsoft\ Windows\ CurrentVersion”分支, 在窗口的右侧 ...

  8. python 基础之第五天

    ###########window路径写法########## In [1]: winpath = 'C:\tmp' In [2]: print winpath C: mp In [3]: winpa ...

  9. [HNOI 2010] 弹飞绵羊

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...

  10. [国家集训队]Crash的数字表格 / JZPTAB

    传送门 题目要求,求: \[\sum_{i=1}^n\sum_{j=1}^mlcm(i,j)\] 先转化为gcd的形式,然后枚举gcd. \[\sum_{i=1}^n\sum_{j=1}^m\sum_ ...