当前位置: 首页 > article >正文

如何实现分页相关功能

文章目录

  • 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.kler.cn/a/518238.html

相关文章:

  • 3097. 或值至少为 K 的最短子数组 II
  • 类和对象(4)——多态:方法重写与动态绑定、向上转型和向下转型、多态的实现条件
  • C# OpenCV机器视觉:利用CNN实现快速模板匹配
  • CentOS 上安装 Go (Golang)
  • MYSQL数据库 - 启动与连接
  • 基于微信小程序的英语学习交流平台设计与实现(LW+源码+讲解)
  • 比简单工厂更好的 - 工厂方法模式(Factory Method Pattern)
  • Lambda 表达式
  • 笔记《Effective Java》01: 创建和销毁对象
  • 软件测试丨消息管道(Kafka)测试体系
  • 电路研究9.2.1——合宙Air780EP音频的AT控制指令
  • 【工程篇】01:GPU可用测试代码
  • python学opencv|读取图像(四十四)原理探究:bitwise_and()函数实现图像按位与运算
  • UGUI判断点击坐标是否在UI内部,以及子UI内部
  • 运行虚幻引擎UE设置Visual Studio
  • spark sql中对array数组类型操作函数列表
  • android studio搭建NDK环境,使用JNI (Java 调 C) 二 通过CMake
  • Couchbase UI: Server
  • 期权帮|如何利用股指期货进行对冲套利?
  • AI如何改变IT行业
  • 单片机基础模块学习——按键
  • vulnhub靶场【kioptrix-3】靶机
  • HTML<kbd>标签
  • C#AWS signatureV4对接Amazon接口
  • 2025年编程AI工具概览
  • 2025美赛Latex模板可直接运行!O奖自用版