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. ABAP抓取异常 try ,endtry.

    DATA: O_CX TYPE REF TO CX_ROOT. TRY . MOVE LS_UPLOAD-MENGE TO LS_OUTPUT-MENGE. CATCH CX_ROOT INTO O_ ...

  2. appium(10)-iOS predictate

    iOS predictate It is worth looking at ’-ios uiautomation’ search strategy with Predicates. UIAutomat ...

  3. appium(4)-Automating mobile web apps

    Automating mobile web apps If you’re interested in automating your web app in Mobile Safari on iOS o ...

  4. PAT 天梯赛 L3-010. 是否完全二叉搜索树 【Tree】

    题目链接 https://www.patest.cn/contests/gplt/L3-010 思路 因为是 完全二叉搜索树 可以用 数据 建树的方式 然后 遍历一遍这个 数字 就是 层序遍历 遍历的 ...

  5. spring事件广播

    可参考:http://www.cnblogs.com/atyou/archive/2013/01/07/2850106.html 其中的类图更是精彩,现截至如下:

  6. angularjs ng-repeat倒叙

    <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng ...

  7. mysql批量sql插入优化

    对于一些数据量较大的系统,数据库面临的问题除了查询效率低下,还有就是数据入库时间长.特别像报表系统,每天花费在数据导入上的时间可能会长达几个小时或十几个小时之久.因此,优化数据库插入性能是很有意义的. ...

  8. RightScale发布2017年度云调查报告

    RightScale最近发布了他们的年度云报告(RightScale 2017云现状报告,RightScale 2017 State of the Cloud Report),这份报告包括了云计算在采 ...

  9. Splay模板(序列终结者)

    我只是一个存模板的,详细的请看这里http://blog.csdn.net/whai362/article/details/47298133 题目链接:http://www.codevs.cn/pro ...

  10. 将linux系统用户导入mysql表

    下面这个程序实现的一个很简单的功能,读取passwd文件,将里面的用户信息写入到mysql里面, 具体代码如下: #!/usr/bin/python import pymysql import tim ...