首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Flutter中创建垂直滚动的PageView?

在Flutter中创建垂直滚动的PageView可以通过使用PageView.builder和PageView.custom构造函数来实现。以下是创建垂直滚动的PageView的步骤:

  1. 导入Flutter的material包和widgets包:
代码语言:txt
复制
import 'package:flutter/material.dart';
  1. 在Widget的build方法中创建一个PageView组件:
代码语言:txt
复制
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('垂直滚动的PageView'),
    ),
    body: PageView.builder(
      scrollDirection: Axis.vertical,
      itemCount: 3,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.blue,
          child: Center(
            child: Text(
              '页面 $index',
              style: TextStyle(fontSize: 24, color: Colors.white),
            ),
          ),
        );
      },
    ),
  );
}

在上面的代码中,我们使用了PageView.builder构造函数来创建一个垂直滚动的PageView。scrollDirection属性被设置为Axis.vertical以实现垂直滚动。itemCount属性指定了PageView中页面的数量。itemBuilder属性是一个回调函数,用于构建每个页面的内容。

  1. 运行应用程序,你将看到一个带有垂直滚动的PageView的界面。

这是一个简单的示例,你可以根据自己的需求进行定制。如果你想了解更多关于PageView的属性和用法,可以参考Flutter官方文档中的PageView类的说明:PageView - Flutter API文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

探索 Flutter NavigationRail:使用详解

介绍 在 Flutter ,NavigationRail 是一个垂直导航栏组件,用于在应用程序中提供导航功能。它通常用于更大屏幕空间设备,平板电脑和桌面应用程序。...import 'package:flutter/material.dart'; 使用 NavigationRail: 在您应用程序中使用 NavigationRail 组件来创建垂直导航栏。...基本用法 NavigationRail 是 Flutter 中用于创建垂直导航栏组件,它提供了一种直观方式来导航应用程序不同部分。...我们创建了一个包含 NavigationRail 和 PageView 界面。...总结 NavigationRail 是 Flutter 中用于创建垂直导航栏组件,具有以下主要优势和用法: 直观导航体验: NavigationRail 提供了直观导航方式,让用户可以轻松地切换应用程序不同部分或执行导航操作

43510
  • Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )

    文章目录 一、Drawer 组件 二、PageView 组件 三、完整代码示例 四、相关资源 一、Drawer 组件 ---- Scaffold 组件 drawer 参数 , 就是设置侧拉导航栏菜单...(int page) 方法 , 进行页面跳转 ; jumpToPage 页面跳转在底部菜单栏 onTap 点击事件调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView...key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动...controller, // 滚动控制类 this.physics, // 滚动逻辑 , 不滚动 / 滚动 / 滚动到边缘是否反弹 this.pageSnapping = true,...child: Center( /// 垂直方向线性布局 child: Column( /// 在主轴 ( 垂直方向 ) 占据大小

    1.8K20

    Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )

    组件 六、完整代码示例 七、相关资源 一、Scaffold 组件 ---- Flutter Scaffold 组件实现了基础材料设计 ( Material Design ) 可视化布局结构 ;...controller 和 List children 字段 , PageController 用于控制 PageView 页面跳转 , children 中就是 PageView 封装多个界面组件...BottomNavigationBarItem 数组元素 , 这就需要创建若干 BottomNavigationBarItem 组件 ; BottomNavigationBarItem 可以设置 默认图标...key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动...child: Center( /// 垂直方向线性布局 child: Column( /// 在主轴 ( 垂直方向 ) 占据大小

    6K50

    何在 Flutter 创建自定义图标【Flutter专题22】

    在本文中,我将向您展示如何在 Flutter 创建自定义图标 Flutter 提供了很多开箱即用图标,使用这些图标非常容易。但是,您也可以使用自己图标。...创建或查找 SVG 文件 您至少需要一个 SVG 文件。您可以在 Internet 上找到免费 SVG 图像或创建自己文件。它必须是 SVG 格式。...按下按钮以获取包含您需要文件 zip。 解压缩下载 Zip 并复制文件。 在fonts文件夹里面,有一个.ttf文件。将其复制到项目中目录,例如assets/fonts....然后,将.dart文件复制到lib目录。例如,您可以将其复制到lib/assets. 该文件应如下所示。有多个IconData常量,每个常量代表一个Icon....在要使用图标的文件,导入下载 .dart 文件,您就可以使用图标了。 import '.

    3.4K20

    Flutter》-- 6.高级组件

    6.1.1 Scrollable组件 在Flutter,一个可滚动组件直接或间接包含一个Scrollable组件,它是可滚动组件基础组件。...目前,可滚动组件大部分组件都支持基于Sliver延迟构建模型,ListView、GridView。...在实际使用过程Flutter提供了SliverList、SliverGrid等可滚动组件Sliver版本。...PageView构造函数: 1)PageView():默认构造函数,创建一个可滚动列表,适合子组件比较少场景; PageView({ Key key, this.scrollDirection...,//处理拖拽开始行为方式,默认为检测到拖拽手势时开始执行滚动拖拽行为 }) 2)PageView.builder():创建一个滚动列表,适合子组件比较多场景,需要指定子组件数量; 3)PageView.custom

    10.6K20

    Flutter 小技巧之 ListView 和 PageView 各种花式嵌套

    这次 Flutter 小技巧是 ListView 和 PageView 花式嵌套,不同 Scrollable 嵌套冲突问题相信大家不会陌生,今天就通过 ListView 和 PageView 三种嵌套模式带大家收获一些不一样小技巧...同方向 PageView 嵌套 ListView介绍完常规使用,接着来点不一样,在垂直切换 PageView 里嵌套垂直滚动 ListView , 你第一感觉是不是觉得不靠谱,为什么会有这样场景...,如下代码所示:通过 NeverScrollableScrollPhysics 禁止了 PageView 和 ListView 滚动效果通过顶部 RawGestureDetector VerticalDragGestureRecognizer...答案是肯定,毕竟产品小脑袋,怎么会想不到在垂直滑动 ListView 里嵌套垂直切换 PageView 这种需求。...details) {    ///只要不是顶部,就不响应 PageView 滑动    ///所以这个判断只支持垂直 PageView 在 ListView 顶部    if (_listScrollController.offset

    2K20

    Flutter 可以缩放拖拽图片

    在pub上面找了下,没有发现一个效果跟微信一样支持缩放拖拽效果image,所以就自己撸了一个,之前写过Flutter 什么功能都有的Image,于是就在这个上面新增了这个功能。...里面是有水平或者垂直手势,会跟onScaleStart/onScaleUpdate/onScaleEnd有冲突。...关于手势,大家可以看看拉面小姐姐关于手势文章,神奇竞技场概念。。 既然不能阻止手势冒泡,那么我就直接不让你能滚动了,然后全部手势都交给我,我来处理。...首先我看了下PageView关于滚动源码,直接指向最终ScrollableState里面的代码,在setCanDrag方法里面根据是否可以Drag,准备了水平/垂直手势。...把ScrollableState里面关于水平垂直滚动处理代码拿出来,我创建了一个属于extended_image专门extended_image_gesture_page_view,属性跟PageView

    4.8K00

    Flutter 首页必用组件NestedScrollView示例详解

    昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本...在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...交流 Flutter博客地址(近200个控件用法):http://laomengit.com 总结 到此这篇关于Flutter 首页必用组件NestedScrollView文章就介绍到这了,更多相关Flutter

    3.8K40

    Flutter开发实战分析-animation_demo瞎复写总结

    以下代码基本参考于 flutter_galleryanimation_demo示例。(可以结合本文看源码) 题外话:这个demo是最炫酷了 ?...简单分析一下 上下滚动,并且自定义动画效果。嗯。上一遍文章CustomScrollView 左右滚动,切换页面。嗯。PageViewPageView可以让像是一页一页滑动。...自定义动画过程 自定义动画过程,在Flutter其实相对简单。提供了很多帮助计算方式。需要做是确定要初始值,和最终值,中间过度变量可以考虑使用lerp就可以完成。...监听事件 之前文章,我们分析过Flutter数据传递。...下一遍文章,我们先介绍一个Flutter整体视图树,然后回顾一下我们遇到过组件。

    2.5K30

    Flutter 首页必用组件NestedScrollView

    老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。

    4.1K10

    flutter仿微信底部图标渐变功能实现代码

    实现思路 在flutter,如果想实现上面的页面切换效果,必然会想到pageView。...pageViewcontroller可以监听到pageView滚动事件,也可以获取pageView滚动位置,所以我们在滚动事件根据位置去改变对应图标颜色就可以实现了。...从一个页面滚动到另一个页面的过程,颜色都是线性渐变,要获取这个过程颜色可以使用flutterColor类提供lerp方法,作用是获取两种颜色之间线性差值 ?...使用StreamBuilder包住要改变颜色组件,并且绑定从构造函数设置StreamController。 在StreamBuilder根据pageView滚动事件传进来参数控制图标颜色。...为Center原因是已经在图标组件创建了一个显示标题组件,方便一起设置颜色。

    1.3K40

    Flutter开发实战分析-animation_demo解析导读

    以下代码基本参考于 flutter_galleryanimation_demo示例。(可以结合本文看源码) 整体动画效果预览 ?...RenderObject可以简单理解成Flutterdom模型,主要是负责布局和绘制。可以继承他实现自己布局协议。 Flutter内置实现了两种布局协议。...PageView外层来监听当前pageView滚动事件.png 处理Notification监听事件 就是监听事件,然后触发ValueNotifier监听事件,和使用controller...---- 滚动物理效果 ScrollPhysics 这些滚动组件物理滚动效果都是通过ScrollPhysics来进行配置Flutter自带 自动ScrollPhysics就有4个。...混合工程编译流程 参考 Flutter SDK doc Flutter布局绘制流程简析(一) 深入了解Flutter界面开发(强烈推荐)

    2.5K30

    何在keras添加自己优化器(adam等)

    2、找到keras在tensorflow下根目录 需要特别注意是找到keras在tensorflow下根目录而不是找到keras根目录。...一般来说,完成tensorflow以及keras配置后即可在tensorflow目录下python目录中找到keras目录,以GPU为例keras在tensorflow下根目录为C:\ProgramData...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

    45K30
    领券