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

Flutter ListView -如何在底部开始滚动

Flutter ListView是Flutter框架提供的一个用于展示列表数据的组件。它可以滚动显示一系列的子组件,包括文本、图像等。要在底部开始滚动ListView,可以通过以下几种方法实现:

  1. reverse属性:设置reverse属性为true,可以反转列表的滚动方向,使得列表从底部开始滚动。具体代码如下:
代码语言:txt
复制
ListView(
  reverse: true,
  children: <Widget>[
    // 列表项
  ],
)
  1. controller属性:使用ScrollController控制器,通过设置初始滚动位置实现从底部开始滚动。具体代码如下:
代码语言:txt
复制
ScrollController _scrollController = ScrollController(initialScrollOffset: double.infinity);
ListView(
  controller: _scrollController,
  children: <Widget>[
    // 列表项
  ],
)
  1. physics属性:设置physics属性为AlwaysScrollableScrollPhysics(),可以强制ListView始终可滚动,即使列表项不足以填满屏幕。具体代码如下:
代码语言:txt
复制
ListView(
  physics: AlwaysScrollableScrollPhysics(),
  children: <Widget>[
    // 列表项
  ],
)

以上是实现在底部开始滚动的三种常用方法,根据具体需求选择适合的方法即可。

推荐的腾讯云相关产品:腾讯云移动推送服务(https://cloud.tencent.com/product/tps)可以帮助开发者快速实现消息推送,提供高可用、高并发的推送服务,适用于各类应用场景。

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

相关·内容

Flutter-ListView组件下拉刷新+滚动底部加载+缓存封装

FlutterListView组件,虽然很好用,但是数据量大的时候,在低配置的机器上会奇卡无比,所以我封装了一个ListView组件,对数据进行截断,并使用 keframe 插件进行流畅性优化,提升低配置设备的用户体验...组件代码 /* * @Author: hxb */ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart...'; import 'package:flutter_easyloading/flutter_easyloading.dart';//后续去除 import 'package:keframe/size_cache_widget.dart...'; /// 可缓存+下拉刷新+滚动底部自动加载的ListView组件(返回数据定义复杂是方便局部刷新) class CacheTableList extends StatefulWidget {...ThemeData.canvasColor notificationPredicate: defaultScrollNotificationPredicate, //是否应处理滚动通知的检查

67110
  • Flutter | 滚动组件,ListView,GridVIew等

    滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表和长布局; 可滚动组件都直接或间接的包含一个...风格的滚动指示器(滚动条),如果要给可滚动组件添加滚动条,只需要将 Scroolbar 作为可滚动组件的任意一个父级组件即可,: Scrollbar( child: SingleChildScrollView...可滚动组件中有很多都支持 Sliver 的延时构建模型, ListView,GridView ,但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴 在滚动组件的坐标描述中,...例如:一个页面,顶部是一个 GridView,底部是一个 ListView,需求是整个页面的滑动效果是统一的,即看起来他们是一个整体,如果单纯使用 GrdView + ListView 来实现就不能保证统一的滑动效果...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件的 Sliver 版, SliverList,SliverGrid 等,实际上 Sliver

    8.5K20

    android使用flutterListView实现滚动列表的示例代码

    今天就用 Flutter 实现一下这种效果。 ? 这里的表现其实就相当于有一个固定长度的容器,然后超出的内容是不可见的,只有当你向上或向下滑动屏幕时,视窗外看不见的内容才会出现在视窗中。...如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单的,因为 Flutter 为我们提供了 ListView 组件。...必须的参数就是 childrenDelegate , 然后传入一个 实现了 SliverChildDelegate 的组件, SliverChildListDelegate 和 SliverChildBuilderDelegate...总结,上面主要讨论了 ListView 的几个构造函数及用法,讨论如何实现常见的滚动列表。 完成的代码,可见list_view.dart 。...最后 笔者最近在学习flutter,会持续地记录自己的学习过程,并放在 github 上。 以上就是本文的全部内容,希望对大家的学习有所帮助。

    1.8K40

    Flutter 视图布局(二)

    flutter packages get flutter pub get ok,接下来我们可以说说 ListBody 和 ListView 了 配合文章一同食用的代码已同步更新到 Github 地址:...,默认为 false,为 true 则 垂直方向从底部开始,水平方向从右边开始 bool primary 是否是主主要的滚动 Widget,默认为 false, 如果为 true 则 controller...DragStartBehaviordragStartBehavior List children 子元素列表 Widget 类型 reverse reverse 就是将列表的渲染方式是否是反向,垂直方向从底部开始...,水平方向从右边开始 controller 关于滚动事件,如果真要说的话,那么篇幅就太长了,所以这里暂时不讲,后续会将一些 Widget 的事件 整理出来。...在默认情况下,如果列表子元素不足以超出可视范围则不会产生可滚动行为。超出可视范围则到达列表尽头时会停留并有水波样式出现。

    3K10

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

    文章目录 一、ScrollController 上拉加载更多 二、ScrollController 使用流程 三、ScrollController 判定滑动到底部 四、完整代码示例 五、相关资源 一、ScrollController...class ListView extends BoxScrollView { ListView({ Key?...(), ), 三、ScrollController 判定滑动到底部 ---- 调用 _scrollController.position.pixels 可以获取当前滚动的像素点 ; 调用 _scrollController.position.maxScrollExtent...可以获取当前最大可滚动位置 ; 如果上述两个值相等 , 那么说明已经滚动到列表最底部了 , 此时可以执行上拉加载更多 /// 为滚动控制器添加监听 _scrollController.addListener...GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 ) 博客源码快照 :

    2K20

    Flutter 中的下拉刷新和上拉加载

    Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator,但是没有提供上拉分页加载更多的组件。...不过不用担心,在FlutterListView组件中,有一个ScrollController属性,它就是专门用来控制ListView滑动事件,在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理...当然,我们是可以找一些第三方的库来实现上拉加载下拉刷新的效果的,比如flutter_easyrefresh这个第三方组件,但是我并不推荐flutter_easyrefresh,因为它有一些小Bug。...); //滚动的距离 print(_scrollController.position.maxScrollExtent); //最大滚动范围 //当滚动到最底部的时候,加载新的数据...但是ListView是有弹簧效果的,当你把页面滚动到最底部之后,它不会立马停住,而是继续往下弹一下再返回来,也就是说,pixels会在等于maxScrollExtent之后继续往上涨(大于maxScrollExtent

    4.1K20

    Flutter》-- 6.高级组件

    参阅书籍: 《Flutter跨平台开发入门与实践》-- 向治洪(著) 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题,可以使用Flutter提供的可滚动组件来处理。...目前,可滚动组件中的大部分组件都支持基于Sliver的延迟构建模型,ListView、GridView。...,默认在垂直方向滚动 this.reverse = false,//控制从头还是从尾开始滚动,默认false,即从头开始滚动 this.padding,//插入子组件时的内边距 bool primary...,默认在垂直方向滚动 bool reverse = false,//控制从头还是从尾开始滚动,默认false,即从头开始滚动 ScrollController controller,//...//开始滚动的偏移量,默认从坐标原点开始排列 double cacheExtent,//缓存不可见的列表项,即使这部分区域不可见,也会被加载处理 this.slivers = const

    10.6K20

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

    第1步:创建起始Flutter应用程序 第2步:使用外部包装 第3步:添加一个有状态的小部件 第4步:创建一个无限滚动ListView 第5步:添加交互性 第6步:导航到新的屏幕 第7步:使用主题更改UI...它可以在MyApp之外的文件中的任何位置使用,但解决方案将它放在文件的底部。...当用户滚动时,ListView小部件中显示的列表将无限增长。 ListView的builder工厂构造函数允许您根据需要懒惰地构建列表视图。...两个参数传递给函数 - BuildContext和行迭代器,i 迭代器从0开始,每次调用该函数时递增,每次建议的单词配对一次。 该模型允许建议的列表在用户滚动时无限增长。...lib/main.dart 第6步:导航到新的屏幕 在这一步中,您将添加一个显示收藏夹的新屏幕(在Flutter中称为路由)。 您将学习如何在主路由和新路由之间导航。

    9.5K20

    Flutter可滑动组件

    Flutter中,我们也有对应的列表Widget,就是ListView。 注意:在Flutter里面想要实现滑动效果,都需要在组件外部包裹滚动的视图。...3.2 Flutter 中常用的 Sliver Sliver名称 功能 对应的可滚动组件 SliverList 列表 ListView SliverFixedExtentList 高度固定的列表 指定itemExtent...比如视图滚动底部时,我们可能希望做上拉加载更多;比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;比如监听滚动什么时候开始,什么时候结束; 在Flutter中监听滚动相关的内容由两部分组成...ScrollController可以通过initialScrollOffset设置初始位置,也可以监听到滚动的位置,但无法监听到开始滚动与结束滚动的事件。...4.3 NotificationListener 如果我们希望监听什么时候开始滚动,什么时候结束滚动,这个时候我们可以通过NotificationListener这个组件实现。

    7.2K30

    Flutter+Dart聊天实例|flutter仿微信聊天|红包|朋友圈

    顶部沉浸式状态条+底部tabbar 至于在flutter中如何实现顶部透明状态栏(去掉状态栏黑色半透明背景),去掉右上角banner,详细介绍可以去看这篇文章 https://segmentfault.com.../a/1190000022483730 flutter图标Icon及自定义IconData组件 flutter中自带图标使用非常简单 Icon(Icons.search) 可是如果想要自定义图标,使用阿里图标...聊天消息滚动到最底部,使用的是ListView里controller控制器jumpTo方法实现 ScrollController _msgController = new ScrollController...ListView( controller: _msgController, padding: EdgeInsets.all(10.0), children: renderMsgTpl...(), ) // 滚动消息至聊天底部 void scrollMsgBottom() { timer = Timer(Duration(milliseconds: 100), () => _msgController.jumpTo

    6.8K31

    Flutter 专题】图解 ListView 下拉刷新与上拉加载 (二)

    和尚上次尝试 ListView 异步加载列表数据时,用了三方库 flutter_refresh,这种方式使用很简单。但列表数据的加载也绝非一种,和尚这次准备用原生尝试一下。...ListView + NotificationListener 和尚参考了很多大神的实现方式,发现 NotificationListener 很像 Android 的滑动监听事件,再顶部和底部添加事件处理...和尚在测试过程中每次滑动一下列表都会调用一次接口,因为在监听过程中若不做任何处理只要列表滑动便会进行监听,和尚的解决的方式有两种; 监听滑动到底部再进行业务操作调用接口,问题一中的判断; bool dataNotification...return true; } 尝试使用 TrackingScrollController,对滑动进行监听,这个类可用于同步两个或更多个共享单个 TrackingScrollController 的惰性创建的滚动视图的滚动偏移...它跟踪最近更新的滚动位置,并将其报告为其初始滚动偏移量。且在非底部时 maxScrollExtent 和 offset 值会相等。使用该类监听时更灵活,有些操作并非到底部才会进行处理等。

    1K21

    Flutter中构建布局 顶

    这些小部件安排在ListView中,而不是列中,因为在小设备上运行应用程序时,ListView会自动滚动。...您可能更喜欢ListView,而不是列,您可能更喜欢ListView,这是一种列状布局,如果其内容太长而无法适应可用空间,则会自动滚动。 有关更多信息,请参阅通用布局小部件。...GridView: 放置小部件作为可滚动的网格。 ListView: 将小部件列为可滚动列表。 Stack: 将小部件重叠在另一个小部件之上。...Dart code:来自Flutter Gallery的grid_list_demo.dart ListView ListView是一个类似列的小部件,它的内容对于其渲染框太长时会自动提供滚动。...ListView摘要: 专门用于组织框列表的列 可以水平或垂直放置 检测它的内容何时不适合并提供滚动 比Column更少配置,但更易于使用并支持滚动 ListView示例: ?

    43.1K10
    领券