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

在添加/删除页面上不更新消费者的Flutter PageView,除非手动翻到不同的页面

在Flutter中,PageView是一个可以滚动切换子页面的组件。当我们在添加/删除页面时,如果不手动翻到不同的页面,消费者无法看到更新后的页面。为了解决这个问题,我们可以使用PageController来控制PageView的滚动,从而实现页面的更新。

首先,我们需要在页面中创建一个PageController对象,并将其作为PageView的controller属性值。然后,我们可以通过PageController的方法来手动滚动到指定的页面。例如,使用animateToPage方法可以在动画效果下滚动到指定页面。在添加/删除页面时,我们可以更新PageController来反映新的页面数量,然后调用animateToPage方法将PageView滚动到当前页面。

以下是一个示例代码,展示了如何在添加/删除页面时更新PageView的方法:

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

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  PageController _pageController;
  int _currentPage = 0;
  List<Widget> _pages = [
    // 添加或删除页面后,更新该列表
    Container(
      color: Colors.red,
    ),
    Container(
      color: Colors.blue,
    ),
    Container(
      color: Colors.green,
    ),
  ];

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _currentPage);
  }

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

  void _updatePage() {
    setState(() {
      _pages.add(
        Container(
          color: Colors.yellow,
        ),
      );
    });
    // 更新页面后,将PageView滚动到当前页面
    _pageController.jumpToPage(_currentPage);
  }

  void _removePage() {
    setState(() {
      _pages.removeLast();
    });
    // 更新页面后,将PageView滚动到当前页面
    _pageController.jumpToPage(_currentPage);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Example'),
      ),
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: _pageController,
              onPageChanged: (int page) {
                setState(() {
                  _currentPage = page;
                });
              },
              children: _pages,
            ),
          ),
          SizedBox(height: 16),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: _updatePage,
                child: Text('添加页面'),
              ),
              SizedBox(width: 16),
              ElevatedButton(
                onPressed: _removePage,
                child: Text('删除页面'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

上述代码中,我们创建了一个包含PageView的MyPage小部件。在initState方法中,我们初始化了PageController,并指定初始页面为_currentPage。在dispose方法中,我们释放了PageController。在_updatePage和_removePage方法中,我们通过setState更新了_pages列表,并调用_pageController.jumpToPage方法将PageView滚动到当前页面。在build方法中,我们创建了一个PageView,并将其放置在Expanded部件中,以填充剩余的可用空间。我们还添加了两个ElevatedButton用于测试添加和删除页面的功能。

这样,当我们在添加/删除页面时,PageView会自动更新,并显示新的页面内容,而不需要手动翻到不同的页面。

关于Flutter的PageView和PageController的更多信息,你可以参考腾讯云的Flutter开发指南中的以下链接:

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

相关·内容

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )

--- PageView 作为显示的主体组件 , 设置给 Scaffold 的 body 字段 , 主要设置以下三个参数 ; 控制器 : 在 PageView 的 controller 参数设置 , PageController...类型 , 主要用于控制 PageView 的页面跳转 ; 滑动回调事件 : onPageChanged 参数设置滑动回调事件 , 传入 index 索引值 , 在该事件中 , 调用 setState...页面滑动 /// 这里设置 PageView 页面滑动也能 onPageChanged: (index) { setState(() { // 更新当前的索引值...{ // 更新当前的索引值 _currentIndex = index; }); }, } PageView 被动设置选中状态 : 在 BottomNavigationBar...界面 , 会回调 PageView 中的 onPageChanged 方法 , 在此处调用 setState 方法 , 在该方法中设置 _currentIndex 的值 , 进而更新 BottomNavigationBar

4.5K20

Flutter完整开发实战详解(二、 快速开发实战篇)

从代码中我们可以看到: 手动左右滑动 PageView 时,通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。...); }, ), ); [顶部TabBar效果]   在 TabBar 页面中,一般还会出现:父页面需要控制 PageView 中子页的需求。...Flutter 中 为我们提供了 RefreshIndicator 作为内置下拉刷新控件;同时我们通过给 ListView 添加 ScrollController 做滑动监听,在最后增加一个 Item,...比起一般的 png 图片文件,矢量图标在开发过程中:可以轻松定义颜色,并且任意调整大小不模糊。...如下代码,通过在 pubspec.yaml 中添加字体库支持,然后在代码中创建 IconData 指向字体库名称引用即可。

5K30
  • GetX代码生成IDEA插件,超详细功能讲解(透过现象看本质)

    整个模块很多逻辑依靠相关变量去标定,会初始化很多不同数据,State层的代码几乎快一千行 所以当业务逐渐的复杂,State层并不薄,他支撑着整个模块的逻辑标定和扭转 除非是肉眼可见的业务极简模块,推荐使用...,选择其中一按钮,另一按钮会自动取消勾选 这算是一个非常有用的功能了 如果大家在PageView中使用getx,可能会发现,所有的子页面中的GetXController,一下全被注入了!...,是放在类的成员变量作用域 这个作用域是在实例化构造函数之前起效的 所以我们在添加被实例的Page的时候,成员变量的作用域直接被触发,GetXController就被注入 PageView触发机制 PageView...GetXController了 这种回收方式在GetBuilder和Obx俩种刷新机制中,都是通用的 回收的时机:是当前页面被回收的时候 唯一麻烦的:需要你手动把GetBindWidget这个控件,引入到自己的项目中...增加PageView解决方案 修复一些bug 2.1.x 重大更新!

    1.7K61

    Flutter完整开发实战详解(二、 快速开发实战篇)

    从代码中我们可以看到: 手动左右滑动 PageView 时,通过 onPageChanged 回调调用 _tabController.animateTo(index); 同步TabBar状态。...页面效果   既然底部Tab页面都实现了,干脆顶部tab页面也一起完成。如下代码,和底部Tab页的区别在于: 底部tab是放在了 Scaffold 的 bottomNavigationBar 中。...顶部TabBar效果   在 TabBar 页面中,一般还会出现:父页面需要控制 PageView 中子页的需求。这时候就需要用到GlobalKey了。...Flutter 中 为我们提供了 RefreshIndicator 作为内置下拉刷新控件;同时我们通过给 ListView 添加 ScrollController 做滑动监听,在最后增加一个 Item,...如下代码,通过在 pubspec.yaml 中添加字体库支持,然后在代码中创建 IconData 指向字体库名称引用即可。

    5.2K10

    Flutter 封装一个 Banner 轮播图

    在 Flutter 中,如何开发一个轮播? ? 了解需求 首先,我们在开发一个功能的时候要了解这个功能的需求,那一个轮播需要有什么功能?...因为后续要添加指示器,指示器应该也要有自己的点击事件,比如点击第二个小圆点就跳转到第二页之类的, 所以,我们要在 Image 上面添加手势识别: return GestureDetector( onTap...如果光写成这样,小圆点是不会变的,所以我们要在 PageView 的 onPageChanged 回调中去 setState(), 顺便更新 _curIndex 的值。...重新构建一下刷新页面,这个时候看一下效果: ? 这个时候这个 Banner 可以说是很完善了,但是如果我们手动的去干预滑动会出现什么问题呢?...因为我们刚才写的是 3 秒一切换,所以我们在,手动切换的时候,它在到达第三秒后,就会出现连续换页的情况。

    3K50

    Flutter GetX使用---简洁的魅力!

    在反复的查阅官方文档后,使用一个全局Bloc的方式,实现了“伪”跨页面交互,详细可查看:flutter_bloc使用解析;fish_redux的广播机制是可以比较完美的实现跨页面交互的,我也写了一篇几万字介绍如何使用该框架...这个页面就是重点了 logic 将演示怎么调用前一个页面的事件 怎么接收上个页面数据 请注意,GetxController包含比较完整的生命周期回调,可以在onInit()接受传递的数据;如果接收的数据需要刷新到界面上...模块的GetXController 这样做当然有好处 可以统一管理复杂模块的多个GetXController 请注意 不建议在Get.to()方法里面进行binding绑定 如果存在多个页面跳转到存在binding...,也可以为没有参数的路由定义一个不同的页面,但是你必须在不接收参数的路由上使用斜杠"/",就像上面说的那样。...页面控制器,全被初始化问题 大家使用PageView,添加PageView页面,PageView页面用GetX构成,会发现所有的PageView页面控制器全被初始化了!

    7.7K103

    探索 Flutter 中的 NavigationRail:使用详解

    安装和设置 在 Flutter 项目中使用 NavigationRail 非常简单,您只需按照以下步骤进行安装和设置即可: 添加依赖项: 在您的 Flutter 项目的 pubspec.yaml 文件中添加...与页面切换结合 NavigationRail 通常与页面切换组件结合使用,例如 PageView 或 IndexedStack,以实现根据选定的导航栏项切换不同的页面内容。...您可以在 PageView 中放置不同的页面,并根据导航栏的选定项切换页面。...然后,我们使用页面控制器 _pageController 来将 PageView 的当前页设置为选定的索引,从而切换到相应的页面。...通过这种方法,您可以实现根据选定的导航栏项切换不同的页面内容,为用户提供直观的导航体验。您还可以根据需要将其他页面添加到 PageView 中,以扩展应用程序的功能。 6.

    66410

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

    这次的 Flutter 小技巧是 ListView 和 PageView 的花式嵌套,不同 Scrollable 的嵌套冲突问题相信大家不会陌生,今天就通过 ListView 和 PageView 的三种嵌套模式带大家收获一些不一样的小技巧...正常嵌套最常见的嵌套应该就是横向 PageView 加纵向 ListView 的组合,一般情况下这个组合不会有什么问题,除非你硬是要斜着滑。...最近刚好遇到好几个人同时在问:“斜滑 ListView 容易切换到 PageView 滑动” 的问题,如下 GIF 所示,当用户在滑动 ListView 时,滑动角度带上倾斜之后,可能就会导致滑动的是...答案是肯定的,毕竟产品的小脑袋,怎么会想不到在垂直滑动的 ListView 里嵌套垂直切换的 PageView 这种需求。...有了前面的思路,其实实现这个逻辑也是异曲同工:把 PageView 和 ListView 的滑动禁用,然后通过 RawGestureDetector 自己管理,不同的就是手势方法分发的差异。

    2.1K20

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

    , 为其赋值一个 Drawer 组件 ; Drawer 组件就是侧拉菜单 , 该组件的 child 设置一个 ListView 组件 , 在列表中设置 DrawerHeader , ListTile...(int page) 方法 , 进行页面跳转 ; jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件中调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView.../// 用于在 TabBarView 中显示的组件 class TabContent extends StatelessWidget { const TabContent({Key key, this.data...child: Center( /// 垂直方向的线性布局 child: Column( /// 在主轴 ( 垂直方向 ) 占据的大小...( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 : https://download.csdn.net/download/han1202012/16277725 ( 本篇博客的源码快照

    1.9K20

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

    controller 和 List children 字段 , PageController 用于控制 PageView 中的页面跳转 , children 中就是 PageView 封装的多个界面组件...onTap 点击事件 , BottomNavigationBar 组件需要设置组件的类型 , 在 BottomNavigationBarType?..., /// 都会根据当前点击的选项而改变 , /// 改变的时候有切换动画 /// 选中的状态下显示底部图标的文本 /// 不选中的状态下隐藏底部的文本内容 shifting...(int page) 方法 , 进行页面跳转 ; jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件中调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ; PageView...child: Center( /// 垂直方向的线性布局 child: Column( /// 在主轴 ( 垂直方向 ) 占据的大小

    6.2K50

    【Flutter】StatefulWidget 组件 ( PageView 组件 )

    文章目录 一、PageView 组件 二、PageView 组件完整代码示例 三、 相关资源 一、PageView 组件 ---- PageView 组件构造函数 : 构造函数中的可选参数就是 PageView...组件 children 设置 : children 字段设置其要滑动切换的各个页面组件 ; 一般使用 Container 封装复杂的组件 ; 代码示例 : 下面的代码就是 PageView 中设置了三个滑动切换的组件...组件会自动更新当前选中的选项卡 setState(() { // 改变 int _currentSelectedIndex 变量的状态...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作时, 回调该方法 /// 该方啊是一个异步方法 , 在方法体前添加 async 关键字...( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 : https://download.csdn.net/download/han1202012/15500147 ( 本篇博客的源码快照

    1.2K00

    掌握Flutter底部导航栏:畅游导航之旅

    Flutter底部导航栏概述 在Flutter中,底部导航栏是一种常见的用户界面组件,通常用于展示应用程序的主要功能模块或不同页面的快速导航入口。...在Flutter中,实现底部导航栏与页面切换通常有两种常见的方式:使用IndexedStack和利用PageView。本节将分别介绍这两种方式的实现方法。...5.2 利用PageView实现页面滑动切换 另一种常见的底部导航栏与页面切换方式是利用Flutter提供的PageView组件,它可以实现页面的滑动切换效果。...通过将多个页面放置在一个PageView中,并配合底部导航栏实现页面切换,可以为用户提供更加流畅的导航体验。...通过设置_bottomNavigationBarState类中的_onItemTapped函数,可以实现底部导航栏与页面的切换效果,并利用PageView的onPageChanged回调函数实现页面切换时的同步更新

    47810

    【Flutter 专题】108 图解 PageView 滑动页面预览小尝试

    PageView 滑动页面预览应用在很多场景中,和尚之前只用过最基本的用法,今天和尚尝试系统性的学习一下 PageView 的基本应用; PageView 一般用户少量需要滑动页面切换的场景,但整体使用很灵活...3. pageSnapping pageSnapping 用于是否禁止页面捕捉,和尚理解为 Page 页面是否为整页滑动切换;当 pageSnapping=false 时,Page 页可以逐步滑动,滑动到中途一半的时候也可以停止...6. physics physics 主要体现在首页和尾页结束时动画动画效果,为 ScrollPhysics 类型,可以自定义也可以根据 Flutter 提供的动画来处理;类似的有 ClampingScrollPhysics...Page 页数组下标;keepPage 是否保存数据状态;viewportFraction 为每个 Page 页占据整个 PageView 比例; PageController 还提供了几个重要的方法...PageView.custom PageView 还提供了 .custom() 构造方法;可以通过 SliverChildBuilderDelegate 代理添加 Page 页面懒加载还可以进行 Page

    1.3K10

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

    简单的分析一下 上下滚动,并且自定义动画效果。嗯。上一遍文章的CustomScrollView 左右滚动,切换页面。嗯。PageView。 PageView可以让像是一页一页滑动。...确定中间状态 tColumnToRow 整体的动画,在Flutter中有很方便的lerp函数可以确定中间的状态。只要传入我们进度的百分比就可以。这个百分比可以由滑动的过程中的offset传入。...这个属性会悬浮我们的AppBar在顶部。但是如果默认情况下,这时appBar的高度就是有56逻辑像素这样。所以,我们需要添加一个bottom,让它,增加到我们想要的最后高度。...自定义动画的过程 自定义动画的过程,在Flutter中其实相对简单。提供了很多帮助的计算方式。需要做的是确定要初始值,和最终值,中间的过度变量可以考虑使用lerp就可以完成。...添加PageScrolPhysics,这样就是按照页面滚动。添加BounceScrollPhysics,就实现ios中的弹性滚动了。 好的。这边文章,我们就暂时到这里。

    2.5K30

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

    上一篇讲完 Flutter 中的一些基本部件,这篇就先填完上篇留下的没写的 AppBar 的坑,以及 Scaffold 其他参数的使用,在开始前,先补一张缩略版的脑图 ?...完整版脑图,后台回复 “Flutter” 关键字,关注 码个蛋(codeegg)会持续更新本系列文章. ?...PageView 和 TabBar 进行关联,带动页面切换,PageViede 的属性参数相对比较简单,这边就不贴啦。...duration 表示切换滚动的时长,curve 表示滚动动画的样式, // flutter 已经在 Curves 中定义许多样式,可以自行切换查看效果 _pageController.animateToPage...切换的监听,这边切换 PageView 的页面后,TabBar 也需要随之改变 // 通过 tabController 来改变 TabBar 的显示位置 _tabController.index

    1.7K20

    抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫

    前言 由于中间几个月项目天天加班,导致没没时间更新,最近一段时间对前端进行了重构,加了很多页面,如登录、注册、关注、个人中心等,目前写这个纯属业余个人爱好,所以断断续续的继续在做.........版本,ios版本正在解决账号问题 效果如下: 架构更新 之前技术采用flutter做的前端,后端api则对接的是抖音官方api,由于抖音的官方api更新频繁,导致经常播放不了,所以索性自己来写服务器后端...界面更新 支持国家化,多语言切换 ipfs上传、下载文件 登录页面 注册页面 上下轮播时优化播放效果 点赞功能 其他功能还在继续完善,各位喜欢的话欢迎点个star 前端项目地址:https://github.com.../telsacoin/telsavideo 后端需要的话请留下邮箱 本期最大的优化就是国际化,flutter国家化按以下步骤 在pubspec.yaml文件加上 flutter: sdk:...flutter flutter_localizations: sdk: flutter intl: ^0.17.0 # Add this line ffi: ^1.1.2 在底部的flutter

    1.1K20
    领券