Flutter中的可滚动列表组件-PageView
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的更多相关文章
- Flutter中通过循环渲染组件
class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...
- Flutter 中那么多组件,难道要都学一遍?
在 Flutter 中一切皆是 组件,仅仅 Widget 的子类和间接子类就有 350 多个,整理的 Flutter组件继承关系图 可以帮助大家更好的理解学习 Flutter,回归正题,如此多的组件到 ...
- flutter中的列表组件
列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类: 垂直列表 ...
- 【Flutter学习】可滚动组件之ScrollView
一,概述 ScrollView 是一个带有滚动的视图组件. 二,组成部分 ScrollView 由三部分组成: Scrollable - 它监听各种用户手势并实现滚动的交互设计.可滚动Widget都直 ...
- Flutter学习笔记(12)--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- 【Flutter学习】可滚动组件之滚动监听及控制
一,概述 ScrollController可以用来控制可滚动widget的滚动位置 二,ScrollController 构造函数 ScrollController({ double initialS ...
- Flutter 实战(一):列表项内容可自定义的列表组件
前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- 在Flutter中嵌入Native组件的正确姿势是...
引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
随机推荐
- Chef vs Puppet vs Ansible vs Saltstack: Which Works Best For You?
Ansible vs SaltStack 谁才是自动化运维好帮手? - CSDN博客 https://blog.csdn.net/a105421548/article/details/53558598 ...
- HDU5015 233 Matrix —— 矩阵快速幂
题目链接:https://vjudge.net/problem/HDU-5015 233 Matrix Time Limit: 10000/5000 MS (Java/Others) Memor ...
- MYSQL进阶学习笔记十五:MySQL 的账号权限赋予!(视频序号:进阶_33,34)
知识点十六:MySQL的账号权限赋予(33) 一.MySQL权限简介 关于mysql的权限简单的理解就是mysql允许你做你全力以内的事情,不可以越界.比如只允许你执行select操作,那么你就不能执 ...
- xml文件的解析(用dom4j解析)
有个第三方的包,用来解析.xml文件比较方便,它是DOM4J.由于是第三方的,所以要使用它就要先下载,并包含进来.步骤: 1.打开dom4j官网,这里下载最新版dom4j-2.1.1.jar. 2.新 ...
- java IO流文件的读写具体实例(转载)
引言: 关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽.上次突然一个同事问了我java文件的读取,我一下子就懵了第一反应就是去网上找,虽然也能 ...
- hdu 1205 吃糖果(抽屉原理)
题意:N种糖果,不能把一样的放在一起吃,即第一次吃一种,下一次吃另一种. 思路:找到个数最多的糖果种类(最大的数目记作 ma,该糖果种类记为a),首先把这n个糖果放到n个抽屉里面,然后把剩余的N-1种 ...
- 如何修改Windows的默认安装路径
运行中输入regedit打开注册表编辑器 展开注册表“HKEY_LOCAL_MACHINE\Software\Microsoft\ Windows\ CurrentVersion”分支, 在窗口的右侧 ...
- python 基础之第五天
###########window路径写法########## In [1]: winpath = 'C:\tmp' In [2]: print winpath C: mp In [3]: winpa ...
- [HNOI 2010] 弹飞绵羊
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2002 [算法] LCT动态维护森林连通性 时间复杂度 : O(NlogN ^ 2) ...
- [国家集训队]Crash的数字表格 / JZPTAB
传送门 题目要求,求: \[\sum_{i=1}^n\sum_{j=1}^mlcm(i,j)\] 先转化为gcd的形式,然后枚举gcd. \[\sum_{i=1}^n\sum_{j=1}^m\sum_ ...