为此，Flutter提供了多种可滚动组件（Scrollable Widget）用于显示列表和长布局。...你如果需要在两个方向上收缩包装（在滚动轴和横轴）例如 dialog或者 pop-up菜单，在这种情况下，你可以用SingleChildScrollView包裹孩子ListBody。...当列表滚动到具体的index位置时，会调用该构建器构建列表项。 itemCount：列表项的数量，如果为null，则为无限列表。...因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。...实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型 ，也正因如此，CustomScrollView才可以将多个Sliver
和尚在学习过程中会在一个 Page 页面同时用到 GridView 和 ListView 或多个 ListView，此时就会遇到常见的滑动冲突问题。...CustomScrollView 允许包含多种滚动模型，例如列表/网格和扩展标题。但其子 Widget 必须为 sliver 类型的。...sliver 代表具有特定滚动效果的滚动模型，sliver 本身不包含滚动交互模型，需要通过 CustomScrollView 连接为一个整体。...shrinkWrap 常用于内容大小不确定情况，如果滚动视图(ListView/GridView/ScrollView 等)没有收缩包装，则滚动视图将扩展到允许的最大大小。...primary 如果为 true，即使滚动视图没有足够的内容来支撑滚动，滚动视图也是可滚动的。否则，默认为 false 情况下，只有具有足够内容的用户才能滚动视图。 ?
，这是网页端的，意思一样，就不再上移动端的图了 img.png img1-1.png 然后点击上面的按钮下方会有相应的文章出现，这个就是展开收缩功能，所谓item对应的型号可以这样理解，当点击了上面的...就已经可以展开和收缩了。...= new MyGVAdapter(this, listS); gllv.setAdapter(myGVAdapter2); //tab可滚动...gvID=position; dataShow(carID,gvID); } }); 写到这里，就已经GV和tablayout...myGVAdapter2.notifyDataSetChanged();这里只通知listview就可以了，GV通知要在btn（展开收缩按钮）中添加。
概述 GridView是Android的另一个列表容器，用法也跟ListView类似，它的布局是一个网格，一行可以有多个项，并且整个视图可以滚动，我们常见的应用有手机中的图库、launcher里面的应用列表...的列数设置为自动 2.android:columnWidth=”90dp “ //每列的宽度，也就是Item的宽度 3.android:stretchMode=”columnWidth”//缩放与列宽大小同步...的滚动条 9.android:fadeScrollbars=”true” //设置为true就可以实现滚动条的自动隐藏和显示 10.android:fastScrollEnabled...=”true” //GridView出现快速滚动的按钮(至少滚动4页才会显示) 11.android:fadingEdge=”none” //GridView衰落...true” //设置为true时，你做好的列表就会显示你列表的最下面 14.android:transcriptMode=”alwaysScroll” //当你动态添加数据时，列表将自动往下滚动最新的条目可以自动滚动到可视范围内
高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。...对象，控制滚动位置和监听滚动事件 this.physics,//用于接收一个ScrollPhysics对象，可以决定滚动组件响应用户操作的方式 @required this.viewportBuilder...接收滚动事件的参数类型为ScrollNotification，它提供了一个metrics属性，该属性包含了当前可视窗口和滚动位置等信息。...的构造函数一共有5个： 1）GridView()：默认构造函数，适用于元素个数有限的场景，会一次性全部渲染children属性中的子元素组件； 2）GridView.builder()：适用于构建大量或无限长的列表...； 5）GridView.custom()：自定义的网格视图，需要同时传入gridDelegate和childrenDelegate。
=”90dp " //每列的宽度，也就是Item的宽度 3.android:stretchMode=”columnWidth"//缩放与列宽大小同步 4.android:verticalSpacing...的滚动条 9.android:fadeScrollbars="true" //设置为true就可以实现滚动条的自动隐藏和显示 10.android:fastScrollEnabled...="true" //GridView出现快速滚动的按钮(至少滚动4页才会显示) 11.android:fadingEdge="none" //GridView衰落...true" //设置为true时，你做好的列表就会显示你列表的最下面 14.android:transcriptMode="alwaysScroll" //当你动态添加数据时，列表将自动往下滚动最新的条目可以自动滚动到可视范围内...getApplicationContext(), "你按下了选项：" + index, 0).show(); } }); } /** * 将图标图片和图标名称存入
可滚动组件 当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter 就会提示 Overflow 错误，为此，Flutter 提供了多种可滚动组件，用于显示列表和长布局； 可滚动组件都直接或间接的包含一个...可滚动组件中有很多都支持 Sliver 的延时构建模型，如 ListView，GridView ，但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴 在滚动组件的坐标描述中，...itemCount：列表项的数量，如果为 null ，则代表无限列表 可滚动组件的构造函数如果需要一个列表项 Builder ，那么通过构造函数构建的通常就是支持 Sliver 的懒加载模型的，反正则不支持...childAspectRatio：所指的子元素横轴和主轴的长度比为最终的长度比 其他的参数都和上面的一样 GridView( gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent...版的可滚动组件和 非 Sliver 版的组件最大的区别就是前者不包含滚动模型(自身不能滚动)，而后者包含滚动模型。
那么如果需要实现横向滚动列表呢，稍稍做下修改就行了 body: SingleChildScrollView( // 设置滚动方向 scrollDirection: Axis.horizontal...initiallyExpanded: true, // 展开时候的背景色 backgroundColor: Colors.yellow[100], // 展开或者收缩的回调...因为 GridView 和 ListView 亮着都是可滑动的部件，直接拼接肯定会有「滑动冲突」，所以 Flutter 就提供了一个粘合剂，CustomScrollView，那么 Flutter 如何实现呢...在结束前，我们再说下如何通过 ScrollController 来控制 Scrollable 的滚动位置。...scrollController 进行监听 _scrollController.addListener(() { // _scrollController.position.pixels 获取当前滚动部件滚动的距离
3.android:stretchMode=”columnWidth”//缩放与列宽大小同步 4.android:verticalSpacing=”10dp” //两行之间的边距 5.android...的滚动条 9.android:fadeScrollbars=”true” //设置为true就可以实现滚动条的自动隐藏和显示 10.android:fastScrollEnabled=”true...” //GridView出现快速滚动的按钮(至少滚动4页才会显示) 11.android:fadingEdge=”none” //GridView衰落(褪去)边缘颜色为空，缺省值是vertical。...stackFromBottom=”true” //设置为true时，你做好的列表就会显示你列表的最下面 14.android:transcriptMode=”alwaysScroll” //当你动态添加数据时，列表将自动往下滚动最新的条目可以自动滚动到可视范围内...，和ListView的用法一样。
当列表滚动到具体的index位置时，会调用该构建器构建列表项。 itemCount：列表项的数量，如果为null，则为无限列表。...在Flutter中我们可以使用GridView来实现，使用方式和ListView也比较相似。...2.2 默认构造函数 使用默认构造函数来创建GridView时，和ListView相比，需要传入一个特殊的参数：gridDelegate。...上面提及的部分组件是和可滚动组件无关的，它们主要是为了结合CustomScrollView一起使用，这是因为CustomScrollView的子组件必须都是Sliver。...ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。
想必大家开发过程中一定碰到过这样的 上面这个图， 看到后分析一下， 最上面是一个滚动轮播图， 肯定滑动的时候是要跟着可以滑动的，这个应该就是一个headview 下面这部分 ，要求是这样的 ...最新视频分类 下面的视频 是可以显示多个的 也就是一个listview效果 其它分类下面的 item 是 类似gridview效果 看到这个效果 应该想到的是recycleview和 expandlistview...说下具体开发流程： 1.写 上面的滚动轮播图界面 单独一个xml 然后作为headerView 2.Expandlistview可以实现 分类两级列表效果 大家都可以做到 3.写完后 ...发现，expandlistView的子布局 有两种 一种是listview效果 一种是gridview效果 这种情况 我们就要自己单独写一个逻辑处理 了 。...2.设置父级默认全部展开 for (int i = 0; i < liveList.size(); i++) { mListView.expandGroup(i); } 3.设置点击不能收缩
方法二： flutter有一个同步滚动组件叫linked_scroll_controller 他能将两个scrollController绑定在一起，实现同步滚动。...所以让左侧导航栏使用ListView,中间座位表使用InteractiveViewer嵌套GridView, 然后将ListView和GridView的ScrollController绑定在一起实现同步滚动...结果： 失败，InteractiveViewer的滑动是通过Matrix4实现的，和ListView的滑动冲突。 同步滚动实现了，但是放大缩小的拖动无法执行。...这里必须特别注意：座位表和导航条组件的单个item的高度必须完全相同，包括margin,padding，不然还是会出现错位现象 至此，最大的难点同步缩放和滑动就解决了。...即用上面1.所得的座位表显示区域的宽高分别除以座位表的x和y, 5、将2.的width除以4.width，即如X轴完全显示下需要缩放的值SX， 将2.的height除以4.height，即如Y轴完全显示下需要缩放的值
它可以用来代替 Gridview。这个小部件是响应式的，无需做太多就可以适应不同的屏幕尺寸。...SafeArea(child: Container()) RefreshIndicator 将可滚动的小部件作为一个孩子。...当孩子被过度滚动时，动画圆形进度指示器会淡入视图并调用未来来更新可滚动的内容。...它可以实现简单的动画，如旋转和缩放到更复杂的动画，如 3D 和倾斜动画。它提供了有用命名的构造函数，例如旋转、缩放和平移，以便快速实现。...InteractiveViewer 在小部件上引入缩放、平移、拖动和捏合功能的最简单方法。它可以根据您的需要高度定制。 Flow 这个小部件利用转换的力量来提供很酷的动画。
BetterMouse for Mac是一款专为Mac用户开发的鼠标增强工具，旨在取代笨重、侵入式和资源匮乏的鼠标驱动程序，可以实现滚轮穿透、自然滚动、鼠标手势等功能，可边操作鼠标边设置相关的参数，实现效率优化...图片BetterMouse for Mac(鼠标增强软件)BetterMouse for Mac软件特点黄油式平滑滚动，具有完全可配置的持续时间、方向、加速度等设置。...精确可配置的离散滚动，带或不带加速度。Shift-滚动到水平开/关，具有可配置的速度和方向。Ctrl-滚动缩放/收缩。用于高分辨率指轮的指轮缩放。光标分离光标加速度和速度控制，加速度可以完全消除。...按钮/手势映射将异常应用程序 滚动设置和按钮/手势映射的每个应用程序独立设置。带有可隐藏应用程序图标的应用程序菜单栏应用程序。干净安全，没有自定义网络访问权限，没有文件访问权限。...完全优化的算法，CPU 和功耗极低。
bool reverse: false,//十分反向显示数据 ScrollController controller, bool primary, ScrollPhysics physics,//物理滚动...如果有未知数量或者无限个Item的情况，再使用上述的方法将不再适用。 那么，我们可以尝试下ListView.builder（）和ListView.custom（）。...下面来看下GridView GridView ---- GirView的用法和ListView类似，只不过由于GridView可以在一列或者一行显示多个Item，所以在构造方法中就多了个参 GridView...当然，GridView你也可以使用builder（）和custom（）的方式实现 import 'package:flutter/material.dart'; void main() { runApp...小结 ---- ListView就是我们常用的列表视图 GridView就是我们常用的宫格视图 ListView和GridView都可以使用new 或者builder（）和custom（）方法来创建对象
RecyclerView是其中一个特工，它可用来替代ListView和GridView；替代ScrollView的则另有其人，它便是嵌套滚动视图NestedScrollView，在Android5.0之后的...首先得弄清楚为什么AppBarLayout划分了这几种滚动行为，所谓知其然，还要知其所以然，才更有利于记忆和理解。...1、AppBarLayout的滚动依赖于主体视图的滚动，与主体视图相对应的，可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分，那么就存在谁先滚谁后滚的问题了。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部固定不动，主体继续向上滚动。 向下滚动：头部固定不动，主体先向下滚动，一直滚到主体全部拉出。然后头部向下展开。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。
CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件，使用场景： ListView和GridView相互嵌套场景，ListView嵌套GridView...时，需要给GridView指定高度，但我们希望高度随内容而变化（不指定），ListView和GridView作为整体滚动效果。...一个页面顶部是AppBar，然后是GridView，最后是ListView，这3个区域以整体来滚动，AppBar具有吸顶效果。...相互嵌套场景 在实际业务场景中经常见到这样的布局，顶部是网格布局（GridView），然后是列表布局（ListView），滚动的时候做为一个整体，此场景是无法使用GridView+ListView来实现的...滚动方向，分为垂直和水平方向。
在Android开发中，我们常常用到ListView和GridView，而有的时候系统的ListView，GridView并不能满足我们的需求，所以我们需要自己定义一个ListView或者GridView...的哪一个位置 到GridView的item过多的时候，可能一屏幕显示不完，我们手指拖动item镜像到屏幕下方，要触发GridView想上滚动，同理，当我们手指拖动item镜像到屏幕上面，触发GridView...自动向上滚动 * 当moveY的值小于向下滚动的边界值，触犯GridView自动向下滚动 * 否则不进行滚动 */ private Runnable mScrollRunnable...，如上图的5号线 .mUpScrollBorder 这个和mDownScrollBorder相反，当我们大于这个高度的时候，DragGridView自动向上滚动，如上图的6号线 理解了这六个距离，我们就来看看创建...，使用Handler和mScrollRunnable利用smoothScrollToPositionFromTop()来实现DragGridView滚动，具体的实现大家可以看代码 手指离开界面，将item
1.3 避免调整和缩放 调整大小/缩放是QML中非常繁重的操作。使用原始大小的图像，而不是调整大小图像的大小/缩放大小。...提供包括框架和阴影的图像效率更高。 2.关于列表性能Tips ---- 2.1 确保您的数据模型尽可能快 在许多情况下，慢速模型(slow model)实际上是列表滚动性能的瓶颈。...2.2 在ListView/GridView中使用CacheBuffer 在某些情况下，cacheBuffer在改善ListView/GridView性能方面很有用。...对于较长的列表，cacheBuffer没有带来好处，因为创建条目的速度与快速滚动时没有缓存的速度相同。...Loader控件可用于动态加载和卸载在QML文件中定义的可视QML组件或在QML文件中定义的项/组件。这种动态行为允许开发人员控制应用程序的内存使用和启动速度。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
