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

Flutter开发-滚动组件

为此,Flutter提供了多种滚动组件(Scrollable Widget)用于显示列表和长布局。...当可滚动组件滚动时,将列表项包裹在RepaintBoundary中可以避免列表项重绘,但是当列表项重绘开销非常(如一个颜色块,或者一个较短文本)时,不添加RepaintBoundary反而会更高效...滚动组件构造函数如果需要一个列表项Builder,那么通过该构造函数构建滚动组件通常就是支持基于Sliver懒加载模型,反之则不支持,这是个一般规律。...因此,为了能让滚动组件能和CustomScrollView配合使用,Flutter提供了一些滚动组件Sliver版,如SliverList、SliverGrid等。...实际上Sliver版滚动组件和非Sliver版滚动组件最大区别就是前者不包含滚动模型(自身不能再滚动),而后者包含滚动模型 ,也正因如此,CustomScrollView才可以将多个Sliver

4.5K20

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

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

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

程序 tab 滚动列表优化方案

类似于今日头条资讯切换列表 今天在做百度程序转换,发现真机上用之前swiper-item结合scroll-view 实现Tab列表效果不理想,于是我重新思考,发现了一种更合适方案。...这样导致了我每次切换到另外一个swiper-item时要计算他滚动位置和他全部元素高度。 我还需要频繁记录每次滚动定位,保存起来,以便下次用时候来拿,使用scroll事件很卡。...上面返回历史位置时,最外层scroll-view组件都要重新赋值scrollTop值,导致内容每次都要从头滚动,很消耗性能,并且还不是实时,比如百度程序(响应不及时)里就放大了这个bug了,当我切换到下一屏时...,内容已经生成了,但是位置没有定位,要等零点几秒才能定位到那个位置,就是说你能看到内容在从头滚动。...这样子就避免了切换时历史滚动位置需要重置问题。于是我想到了既然用他这种做法解决了我前面的缺陷,那我把两个结合起来,不就完美解决了。

2K10

GridView滚动列表顶级用法【flutter20个实例之二】

一、老套路,先看样式 文章底部源码,是左侧样式,右侧是我实际开发中展示 ? ? 二、讲解(后附源码) 1.这里主要是用到GridView 组件 GridView是一个滚动,2D数组控件。...:Android Studio对flutter一些快捷键 5.当然通过children方式加载组件并不是个好方式 GridView提供了一些快速构建方法 ,记住以下常用两个就行 GridView.builder...Padding( padding: const EdgeInsets.all(8.0), child: getItem(), )); } //列表...( crossAxisCount: 2, //这里代表每行显示几个 crossAxisSpacing: 10, //两列之间距离(竖向滚动)...mainAxisSpacing: 4 //两行之间距离(竖向滚动) ), itemBuilder: (context, index) { return

1.9K20

flutter列表组件

flutter中如果要渲染动态列表,一般我们使用ListView.separated,也就是组件ListView别名构造函数separated,这个构造函数需要传递三个必须参数:itemBuilder...函数参数有两个第一个为上下文context,第二个为当前列表索引。 如果只是渲染固定长度列表上面三个参数就够了,但是我们想列表在上划过程中,当滑到底部,继续发送异步请求,列表继续加载。...2、在组件初始化函数initState中用scrollController监听滚动,在回调函数中判断当前位置与底部位置是否相同,若相等则滑到底部。...,因为index最大值比列表长度小一个);而我们在itemCount中传递长度是类表长度加1,所以index最大值与列表长度可以相等了。...当二者相等显示loading组件,否则显示正常组件。 本质就是将loading组件夹在了列表最后一行,并且列表组件内部根据loading来显示自己,加载时透明度为0,否则为1。

91860

Flutter 滚动监听及实战appBar滚动渐变实现

ScrollPosition ScrollPosition是用来保存滚动组件滚动位置。...滚动通知 Flutter 中很多地方使用了通知,如滚动组件(Scrollable Widget)滑动时就会分发滚动通知(ScrollNotification),而Scrollbar正是通过监听ScrollNotification...通过NotificationListener可以在从滚动组件到widget树根之间任意位置都能监听,而ScrollController只能和具体滚动组件关联后才可以。...代码实现步骤 创建滚动所需界面,一个Scaffold组件body里面方式一个Stack层叠小部件,里面放置一个listview,和自定义appBar;floatingActionButton放置一个返回顶部悬浮按钮...,并和ListView这个滚动部件进行关联: double t = _controller.offset / DEFAULT_SCROLLER; if (t < 0.0) { t = 0.0

2.7K20

程序开发基础-scroll-view 滚动视图区域

标题图 编 / 达叔小生 查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 程序开发基础-scroll-view...滚动视图区域 这里只展示纵向滚动,横向同理就不用说明了,自己尝试,横向滚动属性为scroll-x,把纵向滚动改为横向滚动即可。...scroll-into-view为scroll-view属性,类型为String类型,表示值应为某子元素id,甚至哪个方向滚动,则在哪个方向滚动到该元素。...(id不能以数字开头),设置哪个方向滚动,则在哪个方向滚动到该元素 scroll-with-animation 表示在设置滚动条位置时使用动画过渡 bindscrolltoupper 表示滚动到顶部或左边...Github 欢迎 Star、Fork 结语 本文主要讲解 程序开发基础-scroll-view 滚动视图区域 下面我将继续对其他知识 深入讲解 ,有兴趣可以继续关注 礼物走一走 or 点赞

2.3K40

Flutter中构建布局 顶

这些小部件安排在ListView中,而不是列中,因为在设备上运行应用程序时,ListView会自动滚动。...标准小部件 Container: 向边框添加填充,边距,边框,背景颜色或其他装饰。 GridView: 放置小部件作为滚动网格。 ListView: 将小部件列为滚动列表。...ListView摘要: 专门用于组织框列表列 可以水平或垂直放置 检测它内容何时不适合并提供滚动 比Column更少配置,但更易于使用并支持滚动 ListView示例: ?...Stack摘要: 用于与另一个小部件重叠部件列表第一个小部件是基础小部件; 随后子被覆盖在基础小部件顶部 堆栈内容不能滚动 您可以选择剪切超过渲染框子项 Stack示例: ?...Card摘要: 实现材料设计卡片 用于呈现相关信息块 接受单个孩子,但该孩子可以是Row,Column或其他包含子级列表部件 显示圆角和阴影 卡片内容不能滚动 来自材料组件库 卡片示例: ?

43K10

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

那么这里提下滑动容器部件 SingleChildScrollView 这个部件非常简单,不贴源码了。最简单使用方式只需要提供一个 child 即可。...如果需要实现一个垂直滚动列表,可以直接通过 SingleChildScrollView 包裹 Column 来实现,列表内容全部塞到 Column 即可 class SingleChildScrollDemoPage...GridView 生成列表可以通过 ListView 来实现,那么同样,实现网格列表 Flutter 也提供了 GridView 来实现,实现 GridView 方法也很多...我数了下,大概有 10...因为 GridView 和 ListView 亮着都是滑动部件,直接拼接肯定会有「滑动冲突」,所以 Flutter 就提供了一个粘合剂,CustomScrollView,那么 Flutter 如何实现呢...scrollController 进行监听 _scrollController.addListener(() { // _scrollController.position.pixels 获取当前滚动部件滚动距离

2.4K30

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

基础列表 显示数据列表是移动应用程序基本模式。 Flutter包含ListView部件,使列表变得轻而易举!...创建一个水平列表 有时,您可能想要创建一个水平滚动而不是垂直滚动列表。 ListView部件支持开箱即用水平列表。...使用长列表 标准ListView构造函数适用于列表。 为了处理包含大量项目的列表,最好使用ListView.builder构造函数。...路线 使用不同类型条目创建数据源 将数据源转换为部件列表 1.使用不同类型条目创建数据源 项目类型 为了在列表中表示不同类型项目,我们需要为每种类型项目定义一个类别。...开始使用网格最简单方法是使用GridView.count构造函数,因为它允许我们指定我们想要行数或列数。 在这个例子中,我们将生成一个100个部件列表,在列表中显示它们索引。

2.5K20

【老孟FlutterFlutter 2 新增功能

FlutterWeb支持博客文章中找到有关此稳定版本更多详细信息。 Sound Null Safety 空安全性是Dart语言重要补充,它通过区分空类型和非空类型进一步增强了类型系统。...这在移动设备上很有意义,但是很少有台式机用户会想到用鼠标长按某个项目来移动它,因此此版本包括适用于鼠标或触摸输入抓握手柄。平台惯用功能另一项改进是更新滚动条,该滚动条可以正确显示桌面形状因素。...此版本包括一个更新Scrollbar小部件,该小部件在桌面环境中非常有效 滚动条小部件已更新,以提供桌面上预期交互功能,包括拖动拇指,单击轨道以上下滚动页面以及在鼠标悬停在鼠标的任何部分上时显示轨道功能...可用修复程序列表,如带灯泡快速修复程序,帮助您单击鼠标来更改代码。...举例来说,假设您应用中包含以下代码行: 使用不推荐使用参数创建Flutter部件 由于不赞成使用此构造函数参数,因此应将其替换为以下内容: 图片发布 创建一个Flutter部件,其中不推荐使用参数已替换

7.8K20

微信程序实践:2.3 滚动容器组件之 scroll-view

特别当组件设计过于随心所欲时,学习者学习负担也更大了 1、scroll-view 相关问题 ? scroll-view是滚动视图区域组件。...10,在一些购物类或订餐类程序中,左侧有物品分类,左侧是物品列表,单击分类,右侧自动滚动到相关位置,右侧列表上下滚动,左侧分类菜单自动切换,获得高亮焦点,这样功能是怎么实现?...官方文档说,在使用scroll-into-view时,「设置哪个方向滚动,则在哪个方向滚动到该元素」。...不支持也情有原,因为要滚动,普通组件与原生组件都不在一个层,一个要上面,一个要下面,怎么同步? 网上有人说,程序scroll-view不支持嵌套textarea等组件,那是旧版本。...右侧列表滚动时,通过绑定scroll事件,拿到scrollTop,循环对比在哪个区域,就把哪个区域对应菜单高亮。 6、如何在程序中使用 WeUI 组件库?

14.4K30

flutter中对列表性能优化

嵌套列表 - ShrinkWrap 与 Slivers 使用 ShrinkWrap 列表列表 下面是一些使用ListView对象呈现列表列表代码,内部列表shrinkWrap值设置为 true。...当您滚动浏览此 UI 并注意该ColorBarState.build方法调用方式时,会出现可怕部分 。...每个内部列表包含 100 个元素,因此当 UI 加载时,您会立即看到 100 个“Building ColorBarState”实例打印到控制台, 更糟糕是,一旦向下滚动大约一百行,就会再生成一百行...运行应用程序并注意 Flutter 不再需要立即渲染 100 个 ColorRow 小部件。当您滚动时,会动态构建更多小部件,正如您所期望那样。...更好是,一直滚动到下一个列表也不会产生任何特殊费用。 Flutter 会根据需要重新构建小部件,而且很快。

3.5K00
领券