我们先介绍一下常用的可滚动组件（如ListView、GridView等） SingleChildScrollView SingleChildScrollView类似于Android中的ScrollView...，那么使用SingleChildScrollView将会非常昂贵（性能差），此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。...在ListView中，指定itemExtent比让子组件自己决定自身长度会更高效，这是因为指定itemExtent后，滚动系统可以提前知道列表的长度，而无需每次构建子组件时都去再计算一下，尤其是在滚动位置频繁变化时...this.keepScrollOffset = true,//是否保存滚动位置 ... }) 我们介绍一下ScrollController常用的属性和方法： offset：可滚动组件当前的滚动位置...示例 我们创建一个ListView，当滚动位置发生变化时，我们先打印出当前滚动位置，然后判断当前位置是否超过1000像素，如果超过则在屏幕右下角显示一个“返回顶部”的按钮，该按钮点击后可以使ListView
可滚动组件中有很多都支持 Sliver 的延时构建模型，如 ListView，GridView ，但是也有不支持改模型的 SingleChildScrollView 主轴和纵轴 在滚动组件的坐标描述中，...其实此属性的本质上是决定可滚动组件的初始滚动位置是在 头 还是在 尾 ，如 false 时，初始位置在头，反之则在 尾 primary：指是否使用 widget 树中默认的 PrimaryScrollController...在 ListView 中指定 itemExtent 比让子组件自己决定吱声的长度会更有效，因为指定后，滚动系统可以提前知道列表的长度，而无需每次构建子组件是都去计算一下，尤其是在滚动位置频繁变化时（滚动系统需要频繁去计算列表的高度...来保存其状态。...当列表滚动到具体的 index 位置时，会调用该构建起构建列表项。
english_words: ^3.1.0 在添加完新的依赖包后，当你进行保存时 VS Code 会自动进行依赖包的更新和下载，还是比较方便的，就不需要手动进行更新命令了。...，默认为 false，如为 true 则 垂直方向从底部开始，水平方向从右边开始 bool primary 是否是主主要的滚动 Widget，默认为 false， 如果为 true 则 controller...如超出可视范围则到达列表尽头时会停留并有水波样式出现。...BouncingScrollPhysics 的话就是大家都熟悉的回弹效果了，当操作列表到达可视范围尽头时还可以继续超出一定的空间，当失去焦点后回到尽头的位置，这样就能给予用户一个良好的使用体验。...03 - 无线滚动例子 很好，我很佩服你提问的勇气！不过没关系，Flutter 让然也知道这个问题，那么我们就来看看它有哪些相关的方法可以使用。 不用多说，我们还是来先看源码。
controller：控制器对象，主要作用是控制滚动位置和监听滚动事件 primary：是否使用 widget 树中默认的 PrimaryScrollController 。...指定 itemExtent 的值比让子元素决定自身长度在绘制时更高效，特别是在滚动位置频繁变化的状态下，因为设置 itemExtent 可以让滚动系统提前知道列表的长度。...controller：控制器对象，主要作用是控制滚动位置和监听滚动事件 primary：是否使用 widget 树中默认的 PrimaryScrollController 。...ListView 和 GridView 都有对应的组合对象如：SliverList 和 SliverGrid。...：是否保存滚动位置 ScrollController.jumpTo(0.0)：直接滚动至指定位置 ScrollController.animateTo(0.0, duration: Duration
如下所示，我定义了一组列表项组件，并将他们放在了垂直滚动的ListView中： ListView( children: [ //设置ListView组件的标题与图标...当列表滚动到相应位置时，ListView会调用该方法创建对应的子Widget。 itemCount，表示列表项的数量，如果为空，则表示ListView为无限列表。...ListView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，更新视图的滚动位置。...方法注册了滚动监听方法回调，根据当前视图的滚动位置，判断当前是否需要展示“Top”按钮。...关联后才可以监听到滚动信息；通过NotificationListener则可以监听其子Widget中的任意ListView，不仅可以得到这些ListView的当前滚动位置信息，还可以获取当前的滚动事件信息
一 ListView基本介绍 ListView是Android开发中常用的列表视图控件，用于展示垂直滚动的可变长度的数据列表。...功能：ListView可以在有限的屏幕空间内显示大量的数据，并支持用户滚动浏览。它提供了一个可滚动的列表容器，可以逐项地展示数据元素。...可以在布局文件中添加控件来显示列表项中的各个元素。 添加数据：通过适配器向ListView添加数据，可以使用适配器的方法（如add()、addAll()）添加单个或多个数据项。...smoothScrollToPosition(int position)：平滑滚动到指定位置的列表项。...getLastVisiblePosition()：获取当前可见区域的最后一个列表项的位置。 invalidateViews()：通知ListView刷新所有列表项的视图。
对象，控制滚动位置和监听滚动事件 this.physics,//用于接收一个ScrollPhysics对象，可以决定滚动组件响应用户操作的方式 @required this.viewportBuilder...目前，可滚动组件中的大部分组件都支持基于Sliver的延迟构建模型，如ListView、GridView。...= true,//是否保持滚动位置 this.debugLabel, }) 当keepScrollOffset的属性值为true时，可滚动组件的滚动位置会被存储到PageStorage中，当可滚动组件重新创建时可以使用...ScrollController组件还有如下属性和方法： offset：可滚动组件当前的滚动位置； jumpTo()：用于跳转到指定的位置； animateTo()：跳转到指定位置，跳转时会执行设置的动画...接收滚动事件的参数类型为ScrollNotification，它提供了一个metrics属性，该属性包含了当前可视窗口和滚动位置等信息。
@Override public int getCount() { return mDataList.size(); } //指定位置处的数据源对象...只加载View的时候使用findViewById()方法。 * 使用View的setTag()方法保存ViewHolder。...隐藏ListView的滚动条 3.隐藏ListView的滚动条 默认的ListView在滚动时，在右边会显示滚动条，指定当前滚定的位置。...我们可以通过scrollbars属性来控制ListView的滚动状态。特别的，当scrollbars设置为none时，ListView无论滚动还是不滚动，就都不会出现滚动条了。...case 2:// 隐藏ListView的滚动条 LogUtils.d(position); // false-一直都显示 true-不活动时隐藏
ListView做为Android中最常使用的列表控件,主要用来显示同一类的数据，如应用列表，商品列表等。ListView的详细使用与介绍可查阅官方文档ListView。这里不再展示叙述。...虽然觉得这个需求很扯淡，但做为开发的我还是老老实实去寻找实际的统计解决方案。但搜索了一圈并没有找到一个满足需求的解决方案。于是就有了此文。...2 方案 2.1 ListView滚动监听 ListView提供了一个setOnScrollListener的接口来接收List的滚动事件： public class AbsListView{ ......= mInitTop - mCurTop; 2.2.2 进来时停留在某一个item时的滚动距离统计； 如果是从当前页面A跳到其他页面B后，再跳转回来，此时当前页面A正常是停留在上一次浏览的位置（前提是页面...A未被回收掉），此时有可能是停留在某个位置上的，如图： 此时向下滚动时，item1的滚动距离为红色部分，这部分的距离可以怎样计算得到呢？
RecyclerView是google官方在support.v7中提供的一个控件，是ListView和GridView的升级版。...先来看下如何简单的使用RecyclerView RecyclerView listView = (RecyclerView)findViewById(R.id.lsit); listView.setLayoutManager...+ mDecoratedChildWidth), mStartY + mDecoratedChildHeight); mAllItemFrames.put(i, frame); //保存位置信息...mState = state; //保存状态 } 以上，我们为Item的布局做了准备，计算了Item的宽高，以及首个Item的起始位置，并根据设置的Item间，计算每个Item的位置，并保存了下来...，不断刷新Item布局，直到滚动到最终位置。
大家好，又见面了，我是你们的朋友全栈君。 滚动条的相关显示效果 先来看下ListView的滚动条有哪些显示效果。 滚动条自身的外观 这点不用说，就是滚动条自身的颜色，形状等。...Track的外观 默认的ListView是没有设置Track的。为了了解Track的含义，先看一张设置了Track之后的ListView效果。这是一个红色的Track。...可以看到在设置了Track之后在右侧滚动条下面出现一个贯穿整个ListView可见区域的红色线条。所以Track表示的是滚动条滑动时的”轨道”。...滚动条的大小 ListView是垂直滚动条，它的大小就是滚动条的宽度。 滚动条的显示位置 滚动条出现在ListView左边，还是右边，以及是显示在内侧还是外侧。...在XML中自定义ListView滚动条 自定义ListView滚动条可以直接在布局文件中对ListView进行配置。 先看下ListView在XML中有哪些和滚动条相关的配置选项。
PageView 的行为跟 ListView 的在构建元素的意义上类似。...我们可以通过关闭 pageSnapping 的属性来实现。在这种情况下，页面不会滚动到一个整数位置，而是像普通的 ListView 一样的行为。...PageController(); // 在 build 方法内 PageView( controller: controller, children: [ // 添加子挂件 ] ) 滚动的位置...Demo App using PageView 在 Flutter 中，为了演示使用 PageView 来创建一个简单的应用，我创建了一个来学习 GRE 词汇的应用。...这个应用使用了 SQLite 存储，为用户展示了单词并保存难懂的词汇。它也有单词发音的功能。 对应的仓库地址为 github.com/deven98/Flu…。 官方位置 PageView class
ListView里的每行(row)分为 两部分，不滚动的和可滚动的区域。比如本demo的第一列，就是静态的。而后面的所有列都是可以滚动的。 2.2....我不想自己计算滚动的距离，因为还要处理越界，坐标等等。于是我使用 OnTouch事件来处理。于是我们必须搞懂OnTouch的运行机制。了解 请google it. 2.3....那么我们需要监听 列头 （控件）的滚动变化消息（事件），并将消息广播给所有的 数据行。这些数据行收到消息后，调整自己的滚动条位置以保持和 列头 的滚动距离一致。...我写了一个 HorizontalScrollView的子类，重载 onScrollChanged 方法，该方法在 滚动之后执行，相当于“滚动后的事件”，我写了一个观察者（设计模式）的类。...当 收到消息后，调整自身的滚动条位置以保持和 列头 的滚动条位置一致。 ---- 代码比较多，就不贴了。请下载: 源代码下载。
在我印象中Grid是网格式的，而List是列表式的，所以我很好奇两者为什么可以混到一起。当然从类的关系上来看，应该是两者都继承了一个共同的父类。...下面列表详细讨论了使用GridView进行用户交互的功能： 通过拖放对列重新排序 当光标位于表头上时，用户可以按下鼠标左键，然后将该列拖动到新位置，从而对GridView的列进行重新排序。...当用户拖动表头时，会显示标题的浮动列以及一条显示插入位置的实线。...滚动查看内容 若GridView的大小不足以显示所有项，用户可以使用ScrollViewer控件提供的滚动条水平或垂直滚动。若所有内容一开始都可见，滚动条将被隐藏。...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
关注我，获取我的最新文章~ 导语： 实战篇： 1、Flutter如何设计一个高性能，多功能的ListView组件 2、如何解决特定场景下ListView中存在的性能问题 3、开源！！！！...虽然我们号称多功能，但是组件本质任然只是一个ListView，所以提供的能力应该是围绕可以滚动的列表出发。结合闲鱼的文章与个人的日常使用，我认为ListView还欠缺下面几种能力。...1、滚动到指定index 我们在Flutter中可以通过使用ScrollController控制ListView滚动到指定的位置，但这里的位置是基于offset（偏移像素）而非index，实际开发中我们常常会用到跳转指定...滚动到指定的index 这个功能目前已经有很多的开源方案，我了解下来发现主要有两种思路： 1、重新构建视窗，指定我们需要跳转index的Widget到当前视窗的顶部。...我们把itme进行排列，将ListView想象成一个窗口。滑动的时候基于offset改变窗口的位置以显示不同的item。
虽然从我个人体验上并不觉得这是个问题，但是如果产品硬是要你修改，难道要自己重写 PageView 的手势响应吗？...同方向 PageView 嵌套 ListView介绍完常规使用，接着来点不一样的，在垂直切换的 PageView 里嵌套垂直滚动的 ListView ， 你第一感觉是不是觉得不靠谱，为什么会有这样的场景...，如下代码所示：通过 NeverScrollableScrollPhysics 禁止了 PageView 和 ListView 的滚动效果通过顶部 RawGestureDetector的 VerticalDragGestureRecognizer...保存当然响应对象，并且通过 Controller 生成用于响应手势信息的 Drag 对象。...嵌套 ListView 同方向滑动可以正常运行了，但是目前还有个两个小问题，从图示可以看到：在切换之后 ListView 的位置没有保存下来产品要求去除 ListView 的边缘溢出效果所以我们需要对
，我们需要阻止歌手列表滚动，以及浏览器原生滚动，所以要使用@touchmove.stop.prevent阻止冒泡，并且在onShortcutTouchStart事件中记录触碰点的初始位置，以及onShortcutTouchMove...事件中触碰点的位置，通过两个位置的像素差，来滚动歌手列表 // listview.vue 的title，这就需要我们监听scroll组件的滚动事件，来获取当前滚动的位置 // scroll.vue 滚动到下一个title时，新的title将旧的title顶替掉，这里就需要我们计算一个title的高度 // listview.vue 我已经发到了 GitHub Vue_Music_06 上了，有需要的同学可自行下载
ListView专题 1.ListView属性： fadingEdge属性 ListView上边和下边有黑色的阴影,android : fadingEdge = "none"后就不会有阴影了 scrollbars...: fadeScrollbars = "true" 设置此值为true就可以实现滚动条的自动隐藏和显示。...android:drawSelectorOnTop = "false" 点击某条记录不放，颜色会在记录的后面，成为背景色，但是记录内容的文字是可见的 2.ListView.setEmptyView(...)没有效果 有时调用setEmptyView没有效果，这是因为我们设置的这个EmptyView必须和该ListView在同一个布局体系中 如：下面这样的代码有些时候会没有效果 View loadingView...当ListView通过addHeaderView添后，在onItemClick中的position会加上Header的个数，所以这时候在获取数据的时候要对位置进行处理。
正文 默认情况下，Flutter 的滚动组件（比如 ListView）没有显示滚动条，使用 Scrollbar 显示滚动条： Scrollbar( child: ListView.builder(...实现自定义滚动条组件首先需要监听滚动组件 滚动的位置，使用 NotificationListener 监听滚动的位置： bool _handleScrollNotification(ScrollNotification...，其中 metrics.maxScrollExtent 表示当前滚动组件最大滚动距离，metrics.pixels 表示当前滚动位置。...通过这两个值计算滚动条在当前屏幕的位置，通过 Stack 组件 将 ListView 和 自定义的滚动条进行叠加显示： NotificationListener(...NotificationListener 监听到的滚动事件联动，通过 Container 的 alignment 属性控制滚动条的位置： Container( alignment: Alignment
具统一的滚动效果。...CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件，使用场景： ListView和GridView相互嵌套场景，ListView嵌套GridView...时，需要给GridView指定高度，但我们希望高度随内容而变化（不指定），ListView和GridView作为整体滚动效果。...相互嵌套场景 在实际业务场景中经常见到这样的布局，顶部是网格布局（GridView），然后是列表布局（ListView），滚动的时候做为一个整体，此场景是无法使用GridView+ListView来实现的...controller为滚动控制器，可以监听滚到的位置，设置滚动的位置等，用法如下： _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
