PageView组件的功能和用法

文章目录

  • 1 概念介绍
  • 2 使用方法
  • 3 示例代码

我们在上一章回中介绍了如何屏蔽事件关的内容,本章回中将介绍PageView Widget.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

我们在这里介绍的PageView是指左右滑动或者上下滑动显示不同的页面,Flutter把它封装成了独立的Widget。如果有看官们会Android编程的话,就会发现它的功
能和ViewPage以及ViewPage2的功能类似。本章回中将详细它的使用方法。

2 使用方法

和其它的组件一样,PageView提供了相关的属性来控制自己,我们只需要给属性赋值就可以,下面是常用的属性:

  • scrollDirection属性用来控制滑动的方向,例如Axis.horizontal表示水平滑动时切换页面;
  • children属性用来存放滑动的页面,它是一个List,可以存放多个页面;
  • onPageChanged属性是一个回调方法,当页面滑动时它就会被回调,方法中的参数是页面的索引值,索引值与children中的数量一致,不过是从0开始;

3 示例代码

return Scaffold(appBar: AppBar(title: const Text("Example of PaveView"),backgroundColor: Colors.purpleAccent,),body: PageView(scrollDirection: Axis.horizontal,onPageChanged: (value){print("onPage Changed: ${value}");},children: [Container(alignment: Alignment.center,//长度和调试没有效果,会填充满整个屏幕width: 100,height: 300,color: Colors.lightBlue,child: const Text("Page 1"),),Container(alignment: Alignment.center,color: Colors.greenAccent,child: const Text("Page 2"),),Container(alignment: Alignment.center,color: Colors.brown,child: const Text("Page 3"),),],),
);

上面的代码中我们给PageVeiw添加了三个页面,每个页面的背景颜色不同,而且页面中间显示页面序号。注意页面会填充满整个屏幕,即使指定长度和宽度也没有效果。
代码中onPageChanged属性对应的方法没有做太多的事情,只是把当前页面的索引值打印到日志中。我们在这里只列出了核心代码,完整的代码可以查看Github上
ex015文件中的代码。编译并且运行上面的程序就会得到一个可以滑动的页面,从左向右滑动页面时可以在三个页面之间进行切换,同时会在日志窗口中会打印出页面的
索引值。我们在这里就不演示程序运行效果了,建议大家自己动手去实践。
看官们,关于PageView Widget相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/893657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《Java核心技术 卷II》HTTP客户端

HTTP客户端 URLConnection是HTTP称为Web普通适用协议之前设计的,提供大量协议支持,但笨重。 HttpClient提供了更便捷的API和HTTP/2的支持。 HttpClient类 HttpClient对象可以发出请求并接收响应,调用方法获取客户端: HttpCli…

Flutter:自定义Tab切换,订单列表页tab,tab吸顶

1、自定义tab切换 view <Widget>[// 好评<Widget>[TDImage(assetUrl: assets/img/order4.png,width: 36.w,height: 36.w,),SizedBox(width: 10.w,),TextWidget.body(好评,size: 24.sp,color: controller.tabIndex 0 ? AppTheme.colorfff : AppTheme.color999,),]…

论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(一)

Understanding Diffusion Models: A Unified Perspective&#xff08;一&#xff09; 文章概括引言&#xff1a;生成模型背景&#xff1a;ELBO、VAE 和分层 VAE证据下界&#xff08;Evidence Lower Bound&#xff09;变分自编码器 &#xff08;Variational Autoencoders&#x…

QT6 + CMAKE编译OPENCV3.9

参考文档 [1] https://blog.csdn.net/rjkf_css/article/details/135676077 前提条件 配置好相关运行环境&#xff1a;QT6、OPENCV3.9的sources文件 OPENCV下载网页&#xff1a;https://opencv.org/releases/ QT6下载教程&#xff1a;https://blog.csdn.net/caoshangpa/article…

Zemax 非序列模式下的颜色检测器和颜色混合

在 Zemax 的非序列模式中&#xff0c;探测器用于捕获系统中射线的信息。可以使用各种类型的探测器来捕获光学系统性能的不同方面&#xff0c;例如矩形探测器&#xff0c;它存储撞击它的 NSC 源射线的能量数据。 另一种经常使用的探测器类型是 Detector Color&#xff0c;它是一…

金融级分布式数据库如何优化?PawSQL发布OceanBase专项调优指南

前言 OceanBase数据库作为国产自主可控的分布式数据库&#xff0c;在金融、电商、政务等领域得到广泛应用&#xff0c;优化OceanBase数据库的查询性能变得愈发重要。PawSQL为OceanBase数据库提供了全方位的SQL性能优化支持&#xff0c;助力用户充分发挥OceanBase数据库的性能潜…

uni-app 程序打包 Android apk、安卓夜神模拟器调试运行

1、打包思路 云端打包方案&#xff08;每天免费次数限制5&#xff0c;最简单&#xff0c;可以先打包尝试一下你的程序打包后是否能用&#xff09;&#xff1a; HBuilderX 发行App-Android云打包 选择Android、使用云端证书、快速安心打包本地打包&#xff1a; HBuilderX …

小利特惠源码/生活缴费/电话费/油卡燃气/等充值业务类源码附带承兑系统

全新首发小利特惠/生活缴费/电话费/油卡燃气/等充值业务类源码附带U商承兑系统 安装教程如下 图片:

MacOS安装Docker battery-historian

文章目录 需求安装battery-historian实测配置国内源相关文章 需求 分析Android电池耗电情况、唤醒、doze状态等都要用battery-historian&#xff0c; 在 MacOS 上安装 battery-historian&#xff0c;可以使用 Docker 进行安装runcare/battery-historian:latest。装完不需要做任…

二叉树(了解)c++

二叉树是一种特殊的树型结构&#xff0c;它的特点是: 每个结点至多只有2棵子树(即二叉树中不存在度大于2的结点) 并且二叉树的子树有左右之分&#xff0c;其次序不能任意颠倒&#xff0c;因此是一颗有序树 以A结点为例&#xff0c;左边的B是它的左孩子&#xff0c;右边的C是…

亚博microros小车-原生ubuntu支持系列:7-脸部检测

背景知识 官网介绍&#xff1a; Face Mesh - mediapipe mpFaceMesh.FaceMesh() 类的参数有&#xff1a;self.staticMode, self.maxFaces, self.minDetectionCon, self.minTrackCon staticMode:是否将每帧图像作为静态图像处理。如果为 True&#xff0c;每帧都会进行人脸检测…

想品客老师的第六天:函数

函数基础的部分写在这里 函数声明 在js里万物皆对象&#xff0c;函数也可以用对象的方式定义 let func new Function("title", "console.log(title)");func(我是参数title); 也可以对函数赋值&#xff1a; let cms function (title) {console.log(tit…

leetcode刷题记录(八十一)——236. 二叉树的最近公共祖先

&#xff08;一&#xff09;问题描述 236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09;236. 二叉树的最近公共祖先 - 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。百度百科 [https://baike.baidu.com/item/%E6%9C%80%E8%BF%91%E5%85%AC%E5%85%B…

Spring Boot整合JavaMail实现邮件发送

一. 发送邮件原理 发件人【设置授权码】 - SMTP协议【Simple Mail TransferProtocol - 是一种提供可靠且有效的电子邮件传输的协议】 - 收件人 二. 获取授权码 开通POP3/SMTP&#xff0c;获取授权码 授权码是QQ邮箱推出的&#xff0c;用于登录第三方客户端的专用密码。适用…

AIGC数智化赋能:创新地方文旅内容生产传播模式

随着人工智能技术的迅猛发展&#xff0c;AI的应用领域日益扩大。当前&#xff0c;如何将AI这一新质生产力转化为新质传播力和影响力&#xff0c;进而为城市文化和旅游产业的内容创造、传播及消费模式带来全面革新&#xff0c;已成为数字化文旅发展的关键议题。 AI宣传——提升…

Effective C++ 规则45:运用成员函数模板接受所有兼容类型

1、问题背景 在设计类的成员函数时&#xff0c;我们通常会希望能够处理多种不同但兼容的类型。例如&#xff1a; 传入的类型与类的模板类型不同&#xff0c;类模板的类型可能是 T&#xff0c;但我们希望成员函数能够接受与 T 兼容的其他类型&#xff0c;如 const T&、T&a…

HTML5 常用事件详解

在现代 Web 开发中&#xff0c;用户交互是提升用户体验的关键。HTML5 提供了丰富的事件机制&#xff0c;允许开发者监听用户的操作&#xff08;如点击、拖动、键盘输入等&#xff09;&#xff0c;并触发相应的逻辑处理。本文将详细介绍 HTML5 中的常用事件&#xff0c;包括鼠标…

Tensor 基本操作4 理解 indexing,加减乘除和 broadcasting 运算 | PyTorch 深度学习实战

前一篇文章&#xff0c;Tensor 基本操作3 理解 shape, stride, storage, view&#xff0c;is_contiguous 和 reshape 操作 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started Tensor 基本使用 索引 indexing示例代码 加减…

新手理解:Android 中 Handler 和 Thread.sleep 的区别及应用场景

新手理解&#xff1a;Android 中 Handler 和 Thread.sleep 的区别及应用场景 Handler 是啥&#xff1f;Handler 的几个核心功能&#xff1a; Thread.sleep 是啥&#xff1f;Thread.sleep 的核心特点&#xff1a; 两者的区别它们的应用场景1. Handler 的应用场景2. Thread.sleep…

YOLOv10-1.1部分代码阅读笔记-val.py

val.py ultralytics\models\yolov10\val.py 目录 val.py 1.所需的库和模块 2.class YOLOv10DetectionValidator(DetectionValidator): 1.所需的库和模块 from ultralytics.models.yolo.detect import DetectionValidator from ultralytics.utils import ops import torc…