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

Flutter -在列表中添加新项目时保持滚动位置

Flutter是一种跨平台的移动应用开发框架,它可以帮助开发者使用单一代码库构建高性能、美观的移动应用程序。Flutter使用Dart语言进行开发,具有快速的渲染引擎和丰富的UI组件,可以在iOS和Android等多个平台上运行。

在列表中添加新项目时保持滚动位置是指在一个长列表中添加新项目时,希望保持用户当前的滚动位置不变,以便用户能够无缝地继续浏览列表。

为了实现在Flutter中在列表中添加新项目时保持滚动位置,可以使用ListView组件和ScrollController。ListView是一个支持滚动的可滚动组件,而ScrollController是一个控制滚动位置的控制器。

首先,需要创建一个ScrollController对象,并将其传递给ListView组件的controller属性。然后,在添加新项目时,可以使用ScrollController的position属性来获取当前的滚动位置,并在添加新项目后使用ScrollController的jumpTo方法将滚动位置恢复到之前的位置。

以下是一个示例代码:

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

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  ScrollController _scrollController = ScrollController();
  List<String> _items = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My List'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _items.add('New Item');
          });
          _scrollController.jumpTo(_scrollController.position.maxScrollExtent);
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

在上面的示例中,我们创建了一个MyList组件,其中包含一个ListView组件和一个FloatingActionButton。当点击FloatingActionButton时,会向_items列表中添加一个新项目,并使用_scrollController.jumpTo方法将滚动位置恢复到最底部。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

请注意,以上答案仅供参考,具体的实现方式可能因项目需求和个人偏好而有所不同。

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

相关·内容

UITableView在Flutter中是什么?

这样的需求,在iOS中是用UITableView实现的;而在Flutter中,实现这种需求的则是列表控件ListView。...ListView 在Flutter中,ListView可以沿一个方向(垂直或者水平方向)来排列其所有子Widget,因此常被用于需要展示一组连续视图元素的场景,比如通讯录、优惠券、商家列表等。...当列表滚动到相应位置时,ListView会调用该方法创建对应的子Widget。 itemCount,表示列表项的数量,如果为空,则表示ListView为无限列表。...在Flutter中,有一个专门的控件CustomScrollView,用来处理多个需要自定义滚动效果的Widget。...总结 在处理展示一组连续、可滚动的视图元素的场景中,Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。

5.6K10
  • 【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )

    在 initState 方法中执行该操作 , 相应的在 dispose 方法中 , 执行 ScrollController 对象的 dispose 方法 ; @override void initState...() { /// 为滚动控制器添加监听 _scrollController.addListener(() {}); super.initState(); } 最后 , 在 ListView...; 调用 _scrollController.position.maxScrollExtent 可以获取当前最大可滚动位置 ; 如果上述两个值相等 , 那么说明已经滚动到列表最底部了 , 此时可以执行上拉加载更多...是当前像素点位置 /// _scrollController.position.maxScrollExtent 当前列表最大可滚动位置 /// 如果二者相等 , 那么就触发上拉加载更多机制.../ _scrollController.position.maxScrollExtent 当前列表最大可滚动位置 /// 如果二者相等 , 那么就触发上拉加载更多机制 if (_

    2K20

    开始使用-编写你的第一个Flutter应用程序 顶

    在pubspec.yaml中,将english_words(3.1.0或更高版本)添加到依赖项列表。...1.将有状态的RandomWords小部件添加到main.dart。 它可以在MyApp之外的文件中的任何位置使用,但解决方案将它放在文件的底部。...当用户滚动时,ListView小部件中显示的列表将无限增长。 ListView的builder工厂构造函数允许您根据需要懒惰地构建列表视图。...lib/main.dart 第5步:添加交互性 在这一步中,您将为每一行添加可点击的心脏图标。 当用户点击列表中的条目,切换其“收藏”状态时,该词语配对被添加或从一组保存的收藏夹中移除。...1.向RandomWordsState的构建方法中的AppBar添加列表图标。 当用户点击列表图标时,包含收藏夹项目的新路线被推送到导航器,显示该图标。

    9.5K20

    Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

    指定 itemExtent 的值比让子元素决定自身长度在绘制时更高效,特别是在滚动位置频繁变化的状态下,因为设置 itemExtent 可以让滚动系统提前知道列表的长度。...addAutomaticKeepAlives:表示是否将列表项包裹在 AutomaticKeepAlive widget 中。(在懒加载时,如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...(当选择将列表项包裹在 RepaintBoundary 时,在滚动过程中可以避免重绘,如果此列表项需要自己维护 KeepAlive 状态,那么此参数需为 false) addSemanticIndexes...(在懒加载时,如果设置了包裹那么在此列表项滑出屏幕外时不会被GC。...(当选择将列表项包裹在 RepaintBoundary 时,在滚动过程中可以避免重绘,如果此列表项需要自己维护 KeepAlive 状态,那么此参数需为 false) addSemanticIndexes

    8.8K51

    【交互探讨】无限滚动还是分页展示,这是个问题!

    如果我们想将 URL 发送给自己或我们所爱的人以迅速查找一组特定的项目,这通常会很痛苦,因为我们无法真正在列表中的位置添加标记。...给列表的某个位置添加书签 改善无限滚动的最简单方法是在列表中标记“新”和“旧”项目之间的分界处进行区分。...就像我们习惯于使用粘性头部一样,我们可以集成一个页脚显示:一个小助手,它会保持在右下角的栏中,并在需要时显示页脚,而页面的其余部分使用无限滚动。...当用户向下滚动页面时,URL会被更新,我们也允许他们将URL复制到列表中的当前位置。 用户总是可以到达页脚,滚动条指示他们当前所在的位置以及可以跳转到的位置。...考虑使用“加载更多”+无限滚动一起。 考虑使用分页+无限滚动一起。 在加载新项目时更改URL,并将其公开给用户。 允许用户跳转到带有分页下拉列表的任何页面。 考虑使用滚动条范围间隔。

    3.3K20

    Flutter开发-可滚动组件

    在ListView中,指定itemExtent比让子组件自己决定自身长度会更高效,这是因为指定itemExtent后,滚动系统可以提前知道列表的长度,而无需每次构建子组件时都去再计算一下,尤其是在滚动位置频繁变化时...中,在该列表项滑出视口时它也不会被GC(垃圾回收),它会使用KeepAliveNotification来保存其状态。...当可滚动组件滚动时,将列表项包裹在RepaintBoundary中可以避免列表项重绘,但是当列表项重绘的开销非常小(如一个颜色块,或者一个较短的文本)时,不添加RepaintBoundary反而会更高效...当列表滚动到具体的index位置时,会调用该构建器构建列表项。 itemCount:列表项的数量,如果为null,则为无限列表。...简书https://www.jianshu.com/p/af0b1e3fb044 在 pubspec.yaml 中添加依赖 //pub方式 dependencies: flutter_easyrefresh

    4.5K20

    Flutter可滑动组件

    Flutter可滑动组件 1. ListView 1.1 ListView介绍 移动端数据量比较大时,一般都是通过列表来进行展示的,比如商品数据、聊天列表、通信录、朋友圈等。...在Flutter中,我们也有对应的列表Widget,就是ListView。 注意:在Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动的视图。...当列表滚动到具体的index位置时,会调用该构建器构建列表项。 itemCount:列表项的数量,如果为null,则为无限列表。...在Flutter中我们可以使用GridView来实现,使用方式和ListView也比较相似。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; 在Flutter中监听滚动相关的内容由两部分组成

    7.2K30

    Flutter 3.3更新详解

    将模拟的手势事件进行了下发 从 Flutter 3.3 开始,使用触控板滚动会正确地滚动列表,因为 Flutter 会传递「滚动」事件,卡片不会识别这些事件,而列表会进行对应的处理 想了解更多信息,请访问...它有助于当你的应用推送了更新时,在应用中为你的用户提供应用更新功能。 想要了解更多关于设置 Windows 桌面应用版本的内容,请查看 文档。...,还有在滚动事件的长列表时减少卡顿 (#4175。...特别是在我们的基准测试中,图片的加载速度提升为原先的 2 倍左右。 更多相关信息,请查看官方文档:添加 ImageProvider.loadBuffer。...但是,Yeatse 在 GitHub 上提醒我们这项优化中包含了我们并未预料到的后果。Dart 通过为堆保持一个大的虚拟内存来实现指针压缩。

    2.9K20

    Flutter

    它的作用是配置好Widget在树中的位置,并且保持对于相对应的RenderObject和Widget的引用。 3....而渲染对象树在 Flutter 的展示过程分为四个阶段:布局、绘制、合成和渲染。 布局 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。...值得注意的是,页面切换时,由于 State 对象在视图树中的位置发生了变化,需要先暂时移除后再重新添加,重新触发组件构建,因此这个函数也会被调用。...在滚动发生变化而列表项又很多时,这样的计算就会非常频繁。...以一个有着封面头图的列表为例,我们希望封面头图和列表这两层视图的滚动联动起来,当用户滚动列表时,头图会根据用户的滚动手势,进行缩小和展开。

    1.9K40

    Flutter 刷新页面:通过下拉刷新提升用户体验

    当用户下拉页面时,这个函数被调用,它的任务是拉取新的数据并更新我们应用中状态。很重要的一点是,这个函数返回 Future 来保持刷新指示器可见,直到新数据被下载且页面被更新。...使用 BuildContext 来管理状态和导航 BuildContext 是 Flutter 中基本概念,它表示一个挂件在 widget tree 中的位置。...比如,如果用户读一篇文章,然后更新页面,他们应该保持在原来的位置。为了实现这个,我们应该实现在刷新之后保持滚动位置的逻辑。...先进技术和最佳实践 当我们完善 Flutter 应用程序时,采用先进的技术并遵循最佳实践可以显著提高代码的质量和可维护性,特别是在实现拉动刷新等功能时。...在复杂的 Flutter 应用程序中拉动刷新 在更复杂的 Flutter 应用程序中,下拉刷新可能和多个状态层和数据源有交互。在这种场景中,实现一个能够处理复杂性的有强大状态管理的解决方案至关重要。

    33510

    谷歌 Flutter 1.17 发布

    在此发行版中,已完成了全部工作,包括滚动,文本 字段和其他输入小部件的可访问性修复程序。您将在GitHub的该版本中看到有关可访问性问题的完整列表。...在上一个版本中,Flutter团队弃用了原始的Android支持库,并将其移至AndroidX作为所有新项目的默认设置。...他们报告说:“将Flutter添加到核心产品中,可以释放出更高的速度和灵活性,这对于客户及其用户而言,都可以转化为真实可衡量的价值。”...#42100 使用pushReplacement(…时,运行先前路线的辅助动画 #45940弃用UpdateLiveRegionEvent #49389延迟快速滚动时的图像解码 #49391文本选择溢出...(Android) #49771 未为空画笔设置断言缓存提示 #50318 实时图像缓存 #50354 使用支杆盒高度计算选择矩形,以确保它们保持在可见范围内 #50733在gen_l10n中生成消息查找

    3.5K10

    使用 Android Studio 进行 Flutter 开发

    创建新项目 使用 Futter 应用模板创建新的 Flutter 项目: 在 IDE 中,点击 Welcome 窗口,或者主窗口File > New > Project 中的 Create New Project...” 从现有源码创建新项目 创建包含现有 Flutter 源码的新 Flutter 项目: 在 IDE 中,点击 Welcome 窗口,或者主窗口File > New > Project 中的 Create...在主工具栏,可以运行和调试代码: ? IntelliJ 的主工具栏 选择目标设备 在 IDE 中打开 Flutter 项目时,你会在工具栏的右侧看到一组 Flutter 的特定按钮。...” 找到选择目标下拉按钮,点击它会显示出可用设备列表。 选择你希望启动应用的设备。当连接设备或启动模拟器时, 列表中将会加入新选项。...不仅包括添加新类,还包括添加方法和字段到已有的类中。

    6.4K30

    Flutter 1.17版本重磅发布

    如果您对我们在此版本中合并的PR的完整列表感兴趣,则可以在flutter.dev网站上查看。...对于内存使用,此版本将快速滚动浏览大图像时减少了70%的内存,具体取决于设备的内存量,提高了性能。 但是,最广泛的性能改进是iOS中对Metal的支持。...在此版本中,我们已完成了全部工作,包括滚动,文本字段和其他输入小部件的辅助功能修复。您将在GitHub上看到此发行版中关闭的可访问性问题的完整列表。...他们报告说:“将Flutter添加到我们的核心产品中,可以释放出更高的速度和灵活性,这对于我们的客户及其用户而言,都可以转化为真实的,可衡量的价值。”...42100使用pushReplacement(…时,运行先前路线的辅助动画 45940弃用UpdateLiveRegionEvent 49389快速滚动时延迟图像解码 49391文本选择溢出(Android

    2.5K10

    Android开发者的Flutter入门(二)

    那段注释的大概意思是说这个标签是用来表示让Flutter在启动过程中保持闪屏页直到第一帧画面被绘制出来。也就是说,闪屏页的隐藏不需要我们来处理了。 接下来看看这个LaunchTheme: ?...下拉刷新 上拉加载更多 Flutter没有系统提供的加载更过控件,这里我们想办法做一个比较粗糙的实现。思路是在列表的末尾添加一个加载控件,当滑动到列表底部的时候触发加载的操作。...controller: _controller)); 在创建列表的时候我们给列表长度加1,当要获取最后一项时返回加载更多的控件,同时还要通过controller监测列表滚动状态...上拉加载更多 使用Assets 添加 Assets 在Flutter中如果你有图片等文件需要引入到app中,都需要使用Assets, 这个Assets的概念不同于Android中Assets的概念,某种意义上讲...Flutter中添加的asset都需要在pubspec.yaml 中声明。例如,我需要添加一张图片作为加载网络图片时候的占位图,只需要做如下声明就可以了。

    1.4K20

    Flutter | 滚动组件,ListView,GridVIew等

    可滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接的包含一个...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 ,如 false 时,初始位置在头,反之则在 尾 primary:指是否使用 widget 树中默认的 PrimaryScrollController...在 ListView 中指定 itemExtent 比让子组件自己决定吱声的长度会更有效,因为指定后,滚动系统可以提前知道列表的长度,而无需每次构建子组件是都去计算一下,尤其是在滚动位置频繁变化时(滚动系统需要频繁去计算列表的高度...组件中; 典型的,在一个懒加载的列表中,如果将列表包裹在 AutomaticKeepAlive 中,在改了吧划出视口时,他也不会被 GC 回收(垃圾回收),他会使用 KeepAliveNotification...当列表滚动到具体的 index 位置时,会调用该构建起构建列表项。

    8.7K20

    原生长列表内嵌 Flutter 卡片性能调研

    这篇文章主要是对在原生长列表中嵌入多个 Flutter 卡片,每个卡片都对应一个独立的 FlutterView/Engine 这种使用场景进行调研,分析该场景下的性能和内存使用等指标。...主要调研的指标包括三方面: 原生长列表的滚动流畅度,是否存在一些 Flutter 相关的调用会长时间阻塞主线程,也就是 Flutter.platform 线程,导致掉帧; Flutter 卡片的空白延迟帧数...在惯性滚动中,卡片会不断地被回收和重用,所以 Surface 的 Destroy 和 Create 会频繁地被触发,在应用主线程,也就是 Flutter.platform 线程触发 Surface Destroy...卡片空白帧数 在 Demo 的场景中,RecyclerView 在惯性滚动时,将新的卡片从不可见区域移进可见区域,触发了 TextureView 的绘制,而 TextureView 的 Surface...实际操作中会滚动到底部之后再滚动回头部,长列表设置显示 200 张卡片,在这个过程中 RecyclerView 一共创建了 9 个 FlutterCard 对象,也就是 9 对 FlutterView/

    1.4K20

    干货 | 携程APP NativeRN内嵌Flutter UI混合开发实践和探索

    由于目前列表flutter view是依附列表控制器存在的,在创建RN对应的列表控制器view时,将flutter view的控制器挂载到父控制器,这样实现了flutter view依赖RN的生命周期,...RN嵌套flutter时,flutter view作为一个view group加入到RN container中,而native嵌套flutter时,flutter view作为一个view group直接加入到...本次实现的业务场景是1.2节中的场景二,在一个native滚动列表最下方嵌入flutter滚动列表,flutter滚动列表正好能占满一个屏幕。...整个列表向下滚动过程中,先滚动外层列表,当滚动到底部时滚动flutter列表;反之,整个列表向上滚动过程中,先滚动flutter列表,当flutter列表滚动到头部时滚动,向上滚动外层列表。...,这个过程中会有顿挫感,我们在实现中给外层列表添加了滑动效果进行补偿。

    2.6K10
    领券