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

如何在两个不同的方向滚动颤动PageView?

在Flutter中,可以通过使用PageView的controller来实现在两个不同方向上滚动和颤动的效果。下面是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';

class ScrollPage extends StatefulWidget {
  @override
  _ScrollPageState createState() => _ScrollPageState();
}

class _ScrollPageState extends State<ScrollPage> {
  PageController _pageController;
  double _currentPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0, viewportFraction: 0.8);
    _pageController.addListener(() {
      setState(() {
        _currentPage = _pageController.page;
      });
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Page'),
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: 5,
        itemBuilder: (context, index) {
          double scale = 1.0;
          double angle = 0.0;

          if (index - _currentPage >= 0 && index - _currentPage <= 1) {
            // 当前页面及相邻页面
            scale = 1 - (_currentPage - index) * 0.3;
            angle = (_currentPage - index) * 30;
          } else if (index - _currentPage < 0 && index - _currentPage >= -1) {
            // 当前页面的前一页
            scale = 1 - (index - _currentPage) * 0.3;
            angle = (index - _currentPage) * 30;
          }

          return Transform(
            transform: Matrix4.identity()
              ..setEntry(3, 2, 0.001)
              ..rotateY(angle * 0.0174533),
            alignment: Alignment.center,
            child: Container(
              margin: EdgeInsets.all(10),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.blue,
              ),
              child: Center(
                child: Text(
                  'Page $index',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

在上述代码中,我们使用了PageController来控制PageView的滚动和监听滚动事件。通过计算当前页面与滚动位置的差值,我们可以根据差值来调整页面的缩放和旋转角度,从而实现滚动和颤动的效果。

这个示例中,我们创建了一个PageView,其中包含了5个页面。在itemBuilder中,我们根据当前页面与滚动位置的差值来计算缩放比例和旋转角度。然后,我们使用Transform组件来应用缩放和旋转变换。最后,我们使用Container来展示页面内容。

这只是一个简单的示例,你可以根据实际需求来调整动画效果和页面内容。如果你想了解更多关于Flutter的开发和动画效果,可以参考腾讯云的Flutter开发文档:Flutter开发文档

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

相关·内容

用AutoLayout实现分页滚动

:pageView]; } //关键一步,如果需要左右滚动则将容器视图中最右部子视图这里是B右边边界依赖于容器视图右边边界。...(scrollView.widthSize).multiply(colors.count); //这里可以为每个页视图添加不同条目视图,具体实现大家自行添加代码吧。...,主要是对充当容器视图流式布局设置一些属性即可,不需要为条目设置任何约束,而且还支持横竖屏下每页不同数量展示能力。...分页图标效果图 横竖屏切换 对于带有分页功能滚动视图来说,当需要支持横竖屏时就有可能会出现横竖屏切换时界面停留在两个页面中间而不是按页进行滚动效果。...而当滚动视图进行横竖屏切换时不会调整对应contentOffset值,这样就导致了在屏幕方向切换时滚动位置出现异常。

1.9K40
  • 探索 Flutter 中 NavigationRail:使用详解

    响应式设计: NavigationRail 支持响应式设计,可以适应不同尺寸和方向屏幕。这使得它成为构建适用于多种设备和屏幕尺寸应用程序理想选择。...您可以在 PageView 中放置不同页面,并根据导航栏选定项切换页面。...响应式设计 在设计 Flutter 应用程序时,响应式设计是至关重要,特别是在考虑到不同设备尺寸和方向情况下。...响应式设计: 应用程序可以根据不同设备屏幕尺寸和方向来调整 NavigationRail 布局和样式,以确保在各种设备上提供一致用户体验。...与页面切换组件无缝集成: NavigationRail 可以与页面切换组件( PageView 或 IndexedStack)结合使用,以实现根据选定导航栏项切换不同页面内容,从而提供更丰富用户体验

    43510

    深入了解 Flutter 中 PageView(含自定义特效)

    PageViews 类型有: PageView PageView.builder PageView.custom PageView(默认构造器) 我们以固定列表页面为例,使其可滚动。...Orientation 所有 Page Views 类型都可以有 水平方向 或者 垂直方向 滚动页面。...我们可以通过关闭 pageSnapping 属性来实现。在这种情况下,页面不会滚动到一个整数位置,而是像普通 ListView 一样行为。...在这个例子中,我们在 X 方向旋转页面,因为它通过 currentPageValue 减去 index 弧度值进行滑动。我们可以通过乘于这个值放大这种效果。...我们可以调整此变换和变换对齐方式,来获取多种类型页面转产场效果。 Transition 2 和上面相似的代码结构,只是不同转场效果。

    80721

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

    这次 Flutter 小技巧是 ListView 和 PageView 花式嵌套,不同 Scrollable 嵌套冲突问题相信大家不会陌生,今天就通过 ListView 和 PageView 三种嵌套模式带大家收获一些不一样小技巧...我们简单看一下,不管是 PageView 还是 ListView 它们滑动效果都来自于 Scrollable ,而 Scrollable 内部针对不同方向响应,是通过 RawGestureDetector...同方向 PageView 嵌套 ListView介绍完常规使用,接着来点不一样,在垂直切换 PageView 里嵌套垂直滚动 ListView , 你第一感觉是不是觉得不靠谱,为什么会有这样场景...嵌套 ListView 同方向滑动可以正常运行了,但是目前还有个两个小问题,从图示可以看到:在切换之后 ListView 位置没有保存下来产品要求去除 ListView 边缘溢出效果所以我们需要对...有了前面的思路,其实实现这个逻辑也是异曲同工:把 PageView 和 ListView 滑动禁用,然后通过 RawGestureDetector 自己管理,不同就是手势方法分发差异。

    2K20

    《Flutter》-- 6.高级组件

    目前,可滚动组件中大部分组件都支持基于Sliver延迟构建模型,ListView、GridView。...,//滚动方向,默认在垂直方向滚动 this.reverse = false,//控制从头还是从尾开始滚动,默认false,即从头开始滚动 this.padding,//插入子组件时内边距...如果滚动方向是垂直方向,则表示子组件高度;如果滚动方向为水平方向,则表示子组件长度。...PageView构造函数: 1)PageView():默认构造函数,创建一个可滚动列表,适合子组件比较少场景; PageView({ Key key, this.scrollDirection...,//处理拖拽开始行为方式,默认为检测到拖拽手势时开始执行滚动拖拽行为 }) 2)PageView.builder():创建一个滚动列表,适合子组件比较多场景,需要指定子组件数量; 3)PageView.custom

    10.6K20

    何在一个设备上安装一个App两个不同版本

    iOS系统区分两个App是否相同根据是AppBundle ID是否相同,在安装一个程序时,系统是根据Bundle ID来判断是全新安装还是升级。...那想在一个系统上安装一个App两个不同版本,其实是需要两个不同Bundle ID。...同时为了直观区分两个App,一般也会使用两套图标, 假设AppStore版图标名称为Icon.png, Icon@2x.png, OTA版是Icon-beta.png, Icon-beta@2x.png...AppStore:用户提交到AppStore 下一步我们来在项目的Build Setting里添加两个自定义设置,一个命名为BUNDLE_IDENTIFIER, 另一个命名为APP_ICON_NAME...实际上我自己实践时候,新建了一个叫myApp-AppStoreSchema,在不同Schema里Archive里是用不同Build配置,myApp-AppStoreSchema里Archive

    5.2K30

    Flutter PageView 使用详细概述

    [在这里插入图片描述] PageView可用于Widget整屏滑动切换,当代常用短视频APP中上下滑动切换功能,也可用于横向页面的切换,APP第一次安装时引导页面,也可用于开发轮播图功能...1、PageView 实现轮播图 2、PageView实现轮播图 第二篇 3、PageView 实现左右滑动切换视图 在这里我们以单页面做为启动应用程序Demo,构建如下: //应用入口 void...当然在这里Demo小编写成是纵向滑动,这样纵向滑动一般是整屏视屏播放,然后上下滑动切换。...() { //动画方式滚动到指定页面 pageController.animateToPage( //子Widget索引 0, //动画曲线...curve: Curves.ease, //滚动时间 duration: Duration(milliseconds: 200), ); //动画方式滚动到指定位置

    4.2K00

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

    pageViewcontroller可以监听到pageView滚动事件,也可以获取pageView滚动位置,所以我们在滚动事件中根据位置去改变对应图标颜色就可以实现了。...ImageIcon会把一张图片变成单色图片,所以只要图片没有多色要求,就可以用这个组件。 既然能改变颜色了,我们也需要知道pageView滚动时候究竟要改什么颜色。...把它减去当前页面的int类型就可以得出当前页面到下一个页面的偏移量了 double t = pageController.page - currentPage; //根据上一次页面位置获得方向...使用StreamBuilder包住要改变颜色组件,并且绑定从构造函数设置StreamController。 在StreamBuilder中根据pageView滚动事件传进来参数控制图标颜色。...1.0 - data.timeline //开始index大于结束index方向向左 : data.timeline; //小于方向向右 //过渡到图标颜色插值超过

    1.3K40

    【Flutter】自定义滚动开关

    switch是两个状态UI组件,用于在ON(选中)或OFF(未选中)状态之间切换。通常,它是带有拇指滑块按钮,用户可以在其中来回拖拉以选择其他选项,例如“开”或“关”。...假设此属性价值回报为true,则此开关为ON,为OFF则为false。当此属性无效时,开关小部件会失效。 该演示视频展示了如何在颤动中创建自定义滚动开关。...它显示了自定义滚动开关如何在flutter应用程序中使用lite_rolling_switch包工作。...它显示了在用户按下按钮后进行切换交互,该开关将滚动到具有动画效果另一侧,并且在滚动该开关时将更改图标和文本。...我们将添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开或关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,屏幕下方截图所示。

    33.4K60

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

    shouldRebuild方法 bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate); 判断两个方法是否不同...target-20180816153526.gif 不同 这个动画效果和我们之前动画效果都不同,这意味着我们需要自定义动画。 而它和我们上面两个自定义组件也不同,他是一个组件内包括了多个子组件。...ScrollerController 可以滚动部件,基本都有一个ScrollController来控制和查询滑动状态。 监听滑动事件过程中,我们可以通过它来完成两个状态同步。...PageView外层来监听当前pageView滚动事件.png 处理Notification监听事件 就是监听事件,然后触发ValueNotifier监听事件,和使用controller...,我们如何进行自定义外,我们可以有两个基础概念 Scrollable Scrollable部件,滚动效果由physic配置,滚动控制由controller配置。

    2.5K30

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

    简单分析一下 上下滚动,并且自定义动画效果。嗯。上一遍文章CustomScrollView 左右滚动,切换页面。嗯。PageViewPageView可以让像是一页一页滑动。...而且每个页面的大小是一样。 使用PageController 来进行控制。 上下要同时切换。肯定也需要上下两个PageView状态同步。 第一次接触 先准备好数据。...CustomMultiChildLayout中,子节点,都必须用LayoutId来包裹!!! 然后,我还要处理两个细节。 一个是当滚动到中间位置后,就不能左右切换了。...监听 将NotificationListener包裹在pageView之外,就可以监听PageView滚动事件了。 //省略代码......,当滚动距离得到一般之后,就将PageViewphysics改为NeverScrollableScrollPhysics。

    2.5K30

    Flutter 入门指北之快速搭建界面(含Flutter知识体系)

    PageView 和 TabBar 进行关联,带动页面切换,PageViede 属性参数相对比较简单,这边就不贴啦。...显示 if (_tabController.indexIsChanging) { // PageView 切换通过 controller 进行滚动 //...duration 表示切换滚动时长,curve 表示滚动动画样式, // flutter 已经在 Curves 中定义许多样式,可以自行切换查看效果 _pageController.animateToPage...,同时,解决前面 Scaffold 留下 body 属性没讲一个坑,就剩下 drawer 、 bottomNavigationBar 属性没讲了,在解决这两个坑之前,我们先处理下另一个问题 Scaffold...Scaffold - Drawer drawer 同 endDrawer 属性是一样,除了滑动方向,Drawer 这个组件也相对比较简单,只要传入一个 child 即可,在展示之前,先对 appBar

    1.7K20

    Flutter 可以缩放拖拽图片

    ,destinationRect图片显示区域(会根据BoxFit不同而所不同),通过gestureDetailscalculateFinalDestinationRect方式,计算出最终显示区域。...最开始想是手势应该有冒泡,是不是可以我监听到了之后,不像上冒泡,这样可以阻止PageView里面的滑动行为,最后结论是没有方法能阻止冒泡。...关于手势,大家可以看看拉面小姐姐关于手势文章,神奇竞技场概念。。 既然不能阻止手势冒泡,那么我就直接不让你能滚动了,然后全部手势都交给我,我来处理。...首先我看了下PageView关于滚动源码,直接指向最终ScrollableState里面的代码,在setCanDrag方法里面根据是否可以Drag,准备了水平/垂直手势。...把ScrollableState里面关于水平垂直滚动处理代码拿出来,我创建了一个属于extended_image专门extended_image_gesture_page_view,属性跟PageView

    4.8K00

    Flutter 首页必用组件NestedScrollView

    今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图组件,其滚动位置是固有链接。...在普通ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...controller为滚动控制器,可以监听滚到位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener...(20.0); CustomScrollView( controller: _scrollController, ... ) physics表示可滚动组件物理滚动特性,系统提供ScrollPhysics

    4.1K10

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

    今天介绍组件是NestedScrollView,大部分App首页都会用到这个组件。 可以在其内部嵌套其他滚动视图滚动视图,其滚动位置是固有链接。...在普通ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...: true, ... ) scrollDirection滚动方向,分为垂直和水平方向。...reverse参数表示反转滚动方向,并不是由垂直转为水平,而是垂直方向滚动时,默认向下滚动,reverse设置false,滚动方向改为向上,同理水平滚动改为水平向左。...controller为滚动控制器,可以监听滚到位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener

    3.8K40
    领券