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

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

现如今打开一个 App,比如头条、微博,都会有长列表,随着我们不断地滑动,视窗内内容也会不断地更新。今天就用 Flutter 实现一下这种效果。 ?...如果在 web 开发时,是需要容器加上样式 overflow: auto; 要想用 Flutter 实现,其实也是很简单,因为 Flutter 为我们提供了 ListView 组件。...ListView 主要有以下几种使用方式 ListView ListView.builder ListView.separated ListView.custom ListView ListView 是最简单直接方式...正常来说,前面三个已经可以满足我们日常使用需求了,无需自定义。 总结,上面主要讨论了 ListView 几个构造函数及用法,讨论如何实现常见滚动列表。...完成代码,可见list_view.dart 。 最后 笔者最近在学习flutter,会持续地记录自己学习过程,并放在 github 。 以上就是本文全部内容,希望对大家学习有所帮助。

1.7K40
您找到你想要的搜索结果了吗?
是的
没有找到

UITableViewFlutter中是什么?

这样需求,iOS中是用UITableView实现;而在Flutter中,实现这种需求则是列表控件ListView。...但是从上图运行效果可以看到,由于屏幕宽高有限,同一时间用户只能看到3个Widget。也就是说,是否一次性提前构建出所有展示子Widget,于用户而言并没有什么视觉差异。...Flutter中,有一个专门控件CustomScrollView,用来处理多个需要自定义滚动效果Widget。...以一个有着封面头图列表为例,我们希望封面头图和列表这两视图滚动联动起来,当用户滚动列表时,头图会根据用户滚动手势,进行缩小与展开。...总结 处理展示一组连续、可滚动视图元素场景中,Flutter提供了比原生Android、iOS系统更为强大列表组件ListView与CustomScrollView。

5.5K10

Flutter 入门指北之滑动部件(超详细)

前面的小节基本讲完了常用部件和容器部件,也可以完成很多界面,但是又一个问题,假如我们显示一段文字,比如将 一段又臭又长文字 界面上显示 1000 次,不难完成吧 // ..省略一些无关代码...如果需要在每个 item 之间添加分割线,那么通过以上方式实现就比较困难了,所以 Flutter 提供了 separated 方法用来快速构建带有分割线 ListView 加入我们 item 之间分割线需要如下样式...ExpansionTile 既然讲到了 ListView日常开发中,折叠列表也是一个比较常用,所以这边提下 ExpansionTile 这个部件,因为相对比较简单,所以直接上代码了 class...GridView.builder 前面介绍方法中,生成 item 方式基本是通过 List 进行转换 custom 提到了 IndexWidgetBuilder 生成方式,当然, ListView...结束前,我们再说下如何通过 ScrollController 来控制 Scrollable 滚动位置。

2.4K30

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

拉加载更多 ---- FLutter 中 , 所有的列表都支持设置一个 ScrollController 类型参数 , 设置 ScrollController , 用于控制拉加载更多内容 ;... initState 方法中执行该操作 , 相应 dispose 方法中 , 执行 ScrollController 对象 dispose 方法 ; @override void initState...() { /// 为滚动控制器添加监听 _scrollController.addListener(() {}); super.initState(); } 最后 , ListView.../docs/ Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 ) GitHub Flutter 开源示例 : https://download.csdn.net...GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客源码 ) 博客源码快照 :

1.8K20

Flutter 布局常用 widgets(Common layout widgets)

GridView 将多个widget放在一个可滑动表格中。 ListView 将多个widget放在一个可滑动列表中。 Stack 一个widget上面盖上另一个widget。...Material Components Card 将一些相近信息装进一个有圆角和阴影盒子里。 ListTile 一个Row中装载最多3行文字;可选则在前面或尾部添加图标。...GridView 用GridView来将widget放入一个2维列表中。 GridView提供了2个预装配好列表,也可以自己建立自定义列表。 GridView支持滚动。...ListView ListView能以列形式展示数据。当内容超过渲染范围时,自动提供滚动功能。...Stack 小结: 用来在当前widget上面再盖上一widget Stack children中第一个widget放在最下,后面的widget会一盖上去 Stack内容不支持滚动 可以裁剪超出范围

1.3K30

Flutter 视图布局(二)

english_words: ^3.1.0 添加完新依赖包后,当你进行保存时 VS Code 会自动进行依赖包更新和下载,还是比较方便,就不需要手动进行更新命令了。...02 - ListView 关于 ListView 还是先认真看下源码,这次可不能那么鲁莽。 仔细一看,这属性还挺多。不着急,那我们分别都来看一看。...简单来说(翻译一下),通常在可滚动列表容器中子项都会被装在重绘边界之内,以便列表滚动时不需要将它们进行重绘。...其中难点还是在于 ListView.custom 实现,他需要你自己去实现列表相关所有东西:监听滚动、渲染子元素方式、销毁子元素等等。...最后总结 flutter 基本为你考虑了一些相关场景使用实现,所以可以很方便使用这些内容,但是考虑过细自然也就会觉得需要了解内容就过多。

2.9K10

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

默认情况下,Flutter会根据具体平台分别使用不同ScrollPhysics对象,应用不同显示效果,如当滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...默认情况下,Flutter会根据具体平台分别使用不同ScrollPhysics对象,应用不同显示效果,如当滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。...指定 itemExtent 值比让子元素决定自身长度绘制时更高效,特别是滚动位置频繁变化状态下,因为设置 itemExtent 可以让滚动系统提前知道列表长度。...ListView 分页加载 工程 yaml 文件中添加 english_words 依赖 # The following adds the Cupertino Icons font to your...默认情况下,Flutter会根据具体平台分别使用不同ScrollPhysics对象,应用不同显示效果,如当滑动到边界时,继续拖动的话,iOS上会出现弹性效果,而在Android上会出现微光效果。

8.6K51

Flutter | 滚动组件,ListView,GridVIew等

默认情况下,Flutter 会根据具体平台分别使用不同 ScrollPhysics 对象,应用不同显示效果, IOS 上会出现弹性效果,而在 android 则会出现微光效果,如果你想在所有的平台下使用同一个效果...这种机制带来好处是父组件可以控制子树中可滚动组件滚动行为,例如,Scaffold 正是使用这种机制 IOS 实现了点击导航栏回到顶部功能 Scrollbar Scrollbar 是一个 Material..., Flutter 中,术语 ViewPort (视口) ,如无特别说明,则是指一个 Widget 实际显示区域; 例如,一个 ListView 显示区域高度是 800 像素,虽然其列表项总高度可能远远超过...其实此属性本质是决定可滚动组件初始滚动位置是 头 还是 尾 ,如 false 时,初始位置头,反之则在 尾 primary:指是否使用 widget 树中默认 PrimaryScrollController...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件 Sliver 版,如 SliverList,SliverGrid 等,实际 Sliver

8.4K20

Flutter

布局 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树中各渲染对象屏幕位置和尺寸。...值得注意是,页面切换时,由于 State 对象视图树中位置发生了变化,需要先暂时移除后再重新添加,重新触发组件构建,因此这个函数也会被调用。...以一个有着封面头图列表为例,我们希望封面头图和列表这两视图滚动联动起来,当用户滚动列表时,头图会根据用户滚动手势,进行缩小和展开。...ListView 绑定,才可以进行滚动信息监听,进行相应滚动控制。...通过 NotificationListener 则: 可以监听其子 Widget 中任意 ListView; 不仅可以得到这些 ListView 的当前滚动位置信息,还可以获取当前滚动事件信息 。

1.8K40

Flutter技术与实战(4)

Flutter 中,布局和绘制工作实际 Widget 另一个子类 RenderObjectWidget 内完成。...ListView 组件控制器则是 ScrollControler,我们可以通过它来获取视图滚动信息,更新视图滚动位置。...与 ScrollController 不同是,NotificationListener 是一个 Widget,为了监听滚动类型事件,我们需要将 NotificationListener 添加ListView...Flutter 需要原生环境才能运行,但是有些资源我们需要在 Flutter 框架运行之前提前使用,比如要给应用添加图标,或是希望等待 Flutter 框架启动时添加启动图,我们就需要在对应原生工程中完成相应配置...之前ListView学习中,介绍了 ScrollNotification 使用方法:ListView 滚动时会分发通知,我们可以在上层使用 NotificationListener 监听 ScrollNotification

10.7K20

Fluwx:微信SDKFlutter实现

前言 随着 Flutter越来越火热,我相信越来越多小伙伴都跃跃欲试。但是一个很重要问题是,很多第三方 SDK,如微信SDK,都无法Flutter直接使用。...引入 pubspec.yaml文件中添加如下代码: dependencies: fluwx: ^0.0.1 初始化 Fluwx.registerApp(RegisterModel(appId:...所有字段名字和官方文档基本是一致。图片处理图片仅支持png和jpg。 目前所有需要图片地方支持网络图片及assets图片。 使用assets图片需要添加assets://。... 也可以assets图片添加?package=package_name以读取指定包图片。 未来可能支持file://。...注册完成后,请在对应平台添加如下代码: Android:FluwxShareHandler.setWXApi(wxapi) iOS:isWeChatRegistered = YES;你也可以取消注册你

1.6K30

Fluwx:微信SDKFlutter实现

前言 随着 Flutter越来越火热,我相信越来越多小伙伴都跃跃欲试。但是一个很重要问题是,很多第三方 SDK,如微信SDK,都无法Flutter直接使用。...引入 pubspec.yaml文件中添加如下代码: dependencies: fluwx: ^0.0.1 初始化 Fluwx.registerApp(RegisterModel(appId: "...注册完成后,请在对应平台添加如下代码: Android: FluwxShareHandler.setWXApi(wxapi) iOS: isWeChatRegistered = YES; 你也可以取消注册你...所有字段名字和官方文档基本是一致。 图片处理 图片仅支持png和jpg。 目前所有需要图片地方支持网络图片及assets图片。 使用assets图片需要添加assets://。... 也可以assets图片添加?package=package_name以读取指定包图片。 未来可能支持file://。

1.9K20

Flutter中构建布局 顶

然后本指南回过头来解释Flutter布局方法,并说明如何在屏幕放置一个小部件。 讨论如何水平和垂直放置小部件之后,会介绍一些最常见布局小部件。...第6步:把它放在一起 最后一步,你将这些碎片组装在一起。 这些小部件安排在ListView中,而不是列中,因为小设备运行应用程序时,ListView会自动滚动。...如果添加填充,边距,边框或背景色,请使用容器来命名其某些功能。 在这个例子中,每个文本小部件放置容器中以添加边距。 整个行也被放置容器中以在行周围添加填充。 本例中其余UI由属性控制。...标准小部件 Container: 向边框添加填充,边距,边框,背景颜色或其他装饰。 GridView: 放置小部件作为可滚动网格。 ListView: 将小部件列为可滚动列表。...Dart code:来自Flutter Gallerygrid_list_demo.dart ListView ListView是一个类似列小部件,它内容对于其渲染框太长时会自动提供滚动

43K10

flutter仿BOSS直聘(二),大前端技术实现

在过去这段时间里,踊跃出了很多关于flutter技术文章和开源项目例子,基本每天都有,同比RN刚出来时,热情度远超RN。...ListView大家应该都用过,只是需要记住一点,列表再跳转详情时需要记录当前列表滚动位置,只需加入以下代码即可: key: new PageStorageKey('key-name') Hero...动画,详情页面里,用了2处Hero动画,Hero动画是route切换过程中执行动画。...大家都知道,flexibleSpace里CollapseMode.parallax属性可以屏幕滚动时把title移动到appBar里,可实际,布局是定制,实现不了官方那种效果,于是通过监听ScrollController...并计算滚动位置方式修改state属性让appBartitle根据滚动位置显示隐藏。

1.9K20
领券