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

Flutter: Listview在添加项目到列表并滚动到末尾后,获取滚动控制器的完整大小

Flutter是一种跨平台的移动应用开发框架,可以用于快速构建高性能、美观的移动应用程序。Listview是Flutter中常用的列表视图控件,用于展示大量数据并支持滚动。

在Flutter中,要在Listview中添加项目并滚动到末尾,可以使用Listview.builder构造函数。该构造函数接受一个itemBuilder参数,用于构建列表中的每个项目。通过添加新项目到数据源中,并将数据源传递给Listview.builder的itemCount参数,可以动态地添加项目到列表中。

要获取Listview滚动控制器的完整大小,可以使用ScrollController。首先,创建一个ScrollController实例,并将其传递给Listview的controller参数。然后,可以通过ScrollController的position属性来获取滚动控制器的当前位置信息。通过position属性的maxScrollExtent属性,可以获取滚动控制器的完整大小。

以下是一个示例代码,演示了如何在Listview中添加项目并滚动到末尾,并获取滚动控制器的完整大小:

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

class MyListView extends StatefulWidget {
  @override
  _MyListViewState createState() => _MyListViewState();
}

class _MyListViewState extends State<MyListView> {
  List<String> items = [];
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Listview'),
      ),
      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),
      ),
    );
  }
}

在上述示例中,通过点击FloatingActionButton来添加新项目到列表中。在点击事件处理程序中,使用setState方法来更新列表数据源,并调用_scrollController.jumpTo方法来滚动到末尾。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于Flutter的更多信息和相关产品介绍,你可以参考腾讯云的官方文档和Flutter官方网站。

腾讯云相关产品推荐:

  • 云服务器CVM:提供可扩展的计算能力,用于部署和运行Flutter应用程序。详情请参考:云服务器CVM
  • 对象存储COS:用于存储Flutter应用程序中的静态资源文件。详情请参考:对象存储COS
  • 云数据库MySQL:提供可靠的数据库服务,用于存储Flutter应用程序的数据。详情请参考:云数据库MySQL
  • 云函数SCF:用于构建和运行Flutter应用程序的后端逻辑。详情请参考:云函数SCF
  • 云监控CM:用于监控和管理Flutter应用程序的性能和可用性。详情请参考:云监控CM
  • 云安全中心SSC:提供全面的安全服务,保护Flutter应用程序的数据和用户隐私。详情请参考:云安全中心SSC
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

FlutterListView 列表高级功能 ( ScrollController 上拉加载更多 )

上拉加载更多 ---- FLutter 中 , 所有的列表都支持设置一个 ScrollController 类型参数 , 设置 ScrollController , 用于控制上拉加载更多内容 ;...() { /// 为滚动控制器添加监听 _scrollController.addListener(() {}); super.initState(); } 最后 , ListView...: _buildList(), ), 三、ScrollController 判定滑动到底部 ---- 调用 _scrollController.position.pixels 可以获取当前滚动像素点...; 调用 _scrollController.position.maxScrollExtent 可以获取当前最大可滚动位置 ; 如果上述两个值相等 , 那么说明已经滚动到列表最底部了 , 此时可以执行上拉加载更多.../// 为滚动控制器添加监听 _scrollController.addListener(() { /// _scrollController.position.pixels

1.8K20

UITableViewFlutter中是什么?

那么,当这些基本元素排列布局超过屏幕显示尺寸(即超过一屏)时,我们就需要引入列表控件来展示视图完整内容,根据元素多少进行自适应滚动展示。...当列表滚动到相应位置时,ListView会调用该方法创建对应子Widget。 itemCount,表示列表数量,如果为空,则表示ListView为无限列表。...Flutter中,因为Widget并不是渲染屏幕最终视觉元素(RenderObject才是),所以我们无法像原生iOS或Android一样,向持有的Widget对象获取或设置最终渲染相关视觉信息...ListView组件控制器是ScrollController,我们可以通过它来获取视图滚动信息,更新视图滚动位置。...如下代码所示,我们声明了一个有着100个元素列表项,当滚动视图特定位置,用户可以点击按钮返回到列表顶部: 首先,我们State初始化方法里,创建了ScrollController,通过_controller.addListener

5.5K10

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

默认情况下,Flutter会根据具体平台分别使用不同ScrollPhysics对象,应用不同显示效果,如当滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况下,Flutter会根据具体平台分别使用不同ScrollPhysics对象,应用不同显示效果,如当滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...指定 itemExtent 值比让子元素决定自身长度绘制时更高效,特别是滚动位置频繁变化状态下,因为设置 itemExtent 可以让滚动系统提前知道列表长度。...默认情况下,Flutter会根据具体平台分别使用不同ScrollPhysics对象,应用不同显示效果,如当滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...---- ScrollController(控制器) 可设置滑动 View 滚动位置,还可监听获取滑动 View 滚动状态及数据 ScrollController({ double initialScrollOffset

8.6K51

Flutter | 滚动组件,ListView,GridVIew等

physics:此属性接受一个 ScrollPhysics 类型对象,他觉得可滚动组件如何响应用户操作,比如用户滑动完抬起手指,继续执行动画;或者滑动到边界之后如何显示。... ListView 中指定 itemExtent 比让子组件自己决定吱声长度会更有效,因为指定滚动系统可以提前知道列表长度,而无需每次构建子组件是都去计算一下,尤其是滚动位置频繁变化时(滚动系统需要频繁去计算列表高度...当列表滚动到具体 index 位置时,会调用该构建起构建列表项。...方法生成单词;当列表动到末尾时,判断是否有下一页,如果有则进行异步获取显示 loading,没有则显示没有更多了。...由于 crossAxisCount 指定,子元素横轴长度就会确定了,然后通过此参数值就可以确定子元素主轴上长度 可以看到,子元素大小是通过 crossAxisCount 和 childAspectRatio

8.4K20

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

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

1.8K20

Flutter可滑动组件

Flutter中,我们也有对应列表Widget,就是ListView。 注意:Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动视图。...当列表滚动到具体index位置时,会调用该构建器构建列表项。 itemCount:列表数量,如果为null,则为无限列表。...Viewport:显示视窗,即列表可视区域; Sliver:视窗里显示元素 前面介绍 ListView、GridView都是一个完整滚动组件。...比如视图滚动到底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部按钮,点击回到顶部按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; Flutter中监听滚动相关内容由两部分组成...ListView、GridView组件控制器是ScrollController,我们可以通过它来获取视图滚动信息,并且可以调用里面的方法来更新视图滚动位置。

7.1K30

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

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

3.6K40

Flutter技术与实战(4)

与CustomScrollView 当元素排列布局超过屏幕显示尺寸(即超过一屏)时,我们就需要引入列表控件来展示视图完整内容,根据元素多少进行自适应滚动展示。...当列表滚动到相应位置时,ListView 会调用该方法创建对应子 Widget。 itemCount,表示列表数量,如果为空,则表示 ListView 为无限列表。...ListView 组件控制器则是 ScrollControler,我们可以通过它来获取视图滚动信息,更新视图滚动位置。.../** * 声明了一个有着 100 个元素列表项,当滚动视图特定位置,用户可以点击按钮返回列表顶部: */ class MyAPPState extends State {...: $index")),//列表项创建方法 ), ) ) ); } 相比于 ScrollController 只能和具体 ListView 关联才可以监听到滚动信息

10.7K20

Flutter 自定义 TabBar

TabBar常用于放在AppBar中,以标签页形式展示同一个页面不同内容主题标签。 常见属性如下: 1. tabs 标签组。值类型为Widget列表; 2. controller 标签控制器。...值类型为TabController; 3. isScrollable 标签组是否可以滚动。值类型为bool; 4. indicatorColor 指示器颜色。...值类型为EdgeInsets; 7. indicator 指标器装饰。值类型为Decoration; 8. indicatorSize 指示器大小。...自定义带控制器Tab选项卡 代码如下: // lib/pages/tabs/Setting.dart import "package:flutter/material.dart"; // 设置页面 class...上面这个自定义Tab选项卡看起来很简单,但是由于加入了控制器实际项目中可以运用控制器实现一些复杂页面交互。

3K20

Flutter开发-可滚动组件

为此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表和长布局。...ListView中,指定itemExtent比让子组件自己决定自身长度会更高效,这是因为指定itemExtent滚动系统可以提前知道列表长度,而无需每次构建子组件时都去再计算一下,尤其是滚动位置频繁变化时...当可滚动组件滚动时,将列表项包裹在RepaintBoundary中可以避免列表项重绘,但是当列表项重绘开销非常小(如一个颜色块,或者一个较短文本)时,不添加RepaintBoundary反而会更高效...当列表滚动到具体index位置时,会调用该构建器构建列表项。 itemCount:列表数量,如果为null,则为无限列表。...,每次获取数据需要200毫秒,获取成功将新数据添加到_icons,然后调用setState重新构建。

4.4K20

Flutter 构建完整应用手册-列表

基础列表 显示数据列表是移动应用程序基本模式。 Flutter包含ListView部件,使列表变得轻而易举!...创建一个ListView 使用标准ListView构造函数非常适合仅包含少量项目列表。 我们还将使用内置ListTile部件来为我们项目提供一个可视结构。...创建一个水平列表 有时,您可能想要创建一个水平滚动而不是垂直滚动列表ListView部件支持开箱即用水平列表。...虽然默认ListView构造函数要求我们一次创建所有条目,但ListView.builder构造函数将在滚动到屏幕上时创建条目。 1.创建一个数据源 首先,我们需要一个数据源来处理。...路线 使用不同类型条目创建数据源 将数据源转换为部件列表 1.使用不同类型条目创建数据源 项目类型 为了列表中表示不同类型项目,我们需要为每种类型项目定义一个类别。

2.5K20

Flutter 首页必用组件NestedScrollView

老孟导读:昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,...如果你想升级最新版本,建议慎重,有些人升级后项目无法运行。...普通ScrollView中, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表滚动到顶部不会导致外部ScrollView中SliverAppBar折叠以展开。...controller为滚动控制器,可以监听滚到位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener

4K10

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

这次 Flutter 小技巧是 ListView 和 PageView 花式嵌套,不同 Scrollable 嵌套冲突问题相信大家不会陌生,今天就通过 ListView 和 PageView 三种嵌套模式带大家收获一些不一样小技巧...最近刚好遇到好几个人同时问:“斜滑 ListView 容易切换到 PageView 滑动” 问题,如下 GIF 所示,当用户滑动 ListView 时,滑动角度带上倾斜之后,可能就会导致滑动是...同方向 PageView 嵌套 ListView介绍完常规使用,接着来点不一样垂直切换 PageView 里嵌套垂直滚动 ListView , 你第一感觉是不是觉得不靠谱,为什么会有这样场景...如果对实现逻辑分析没兴趣,可以直接看本小节末尾 源码链接 。...= null) {      ///获取 ListView renderBox      final RenderBox?

1.8K20

Flutter如何设计一个高性能,多功能ListView组件

Flutter如何设计一个高性能,多功能ListView组件 学习最忌盲目,无计划,零碎知识点无法串成系统。学到哪,忘哪,面试想不起来。...关注我,获取最新文章~ 导语: 实战篇: 1、Flutter如何设计一个高性能,多功能ListView组件 2、如何解决特定场景下ListView中存在性能问题 3、开源!!!!...1、滚动到指定index 我们Flutter中可以通过使用ScrollController控制ListView滚动到指定位置,但这里位置是基于offset(偏移像素)而非index,实际开发中我们常常会用到跳转指定...很多时候,我们都会在获取到更多数据,调用setState更新列表UI,但调用setState之后,SliverMultiBoxAdaptorElement会对当前屏幕上以及缓存区中所有的element...滚动到指定index 这个功能目前已经有很多开源方案,我了解下来发现主要有两种思路: 1、重新构建视窗,指定我们需要跳转indexWidget当前视窗顶部。

5810

Flutter中实现下拉刷新与上拉加载更多

其基本实现方法是该组件添加onRefresh事件,当用户下拉刷新时会触发该事件,该事件中可以用调用一个延时任务Future.delayed( ),延时任务回调中重新请求数据即可。 2....上拉加载更多 Flutter中主要通过使用 ListView.builder( ) 添加控制器来实现上拉加载更多。...其基本实现方法是该组件里添加控制器组件初始化时实例化ScrollController类型控制器,然后初始化initState( )中,给控制器添加addListener( )监听事件,事件回调函数中可以获得滚动下拉距离及整个页面的高度..._getData(); // 监听滚动事件 _scrollController.addListener((){ // 获取滚动条下拉距离..._getData(); } }); } // 获取数据列表 void _getData() async{ if(this

3K10

flutter上拉抽屉效果 flutter拖动抽屉效果

抽屉自动向下滑动关闭,可配置形状是否开启这个功能 4、 抽屉打开状态时,当向下滑动抽屉时,没有滑动到一定距离时放开,抽屉会自动向上滑动回到打开状态,当滑动到一定距离时放开,抽屉会自动向下滑动到关闭状态...实际项目首先是引用依赖,通过pub仓库添加依赖,代码如下:最新版本查看这里 dependencies: drag_container: ^1.0.1 或者是通过github方式添加依赖,代码如下:...pub get 然后使用地方导包,代码如下: import 'package:drag_container/drag_container.dart'; 然后就可以使用 DragContainer...backGroundColor: Colors.white, ///背景圆角大小 cornerRadius: 12, ///自动上滑动或者是下滑分界值...,代码如下: ///可滑动布局构建 这里是一个列表ListView buildListView() { return ListView.builder( ///列表控制器

3.3K51

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

本次技术改造之前,大搜页面的酒店列表和酒店主流程列表大相径庭,差异不光是UI展示方面,酒店频道列表信息和优惠更加完整,价格体系也更统一。...由于目前列表flutter view是依附列表控制器存在创建RN对应列表控制器view时,将flutter view控制器挂载到父控制器,这样实现了flutter view依赖RN生命周期,...本次实现业务场景是1.2节中场景二,一个native滚动列表最下方嵌入flutter滚动列表flutter滚动列表正好能占满一个屏幕。...整个列表向下滚动过程中,先滚动外层列表,当滚动到底部时滚动flutter列表;反之,整个列表向上滚动过程中,先滚动flutter列表,当flutter列表滚动到头部时滚动,向上滚动外层列表。...3.2.2 view启动顺序 通常是先创建native view树,view树创建成功,手动创建flutter view加入view树中。

2.3K10
领券