Viewport 所有 sliver 的 Element 都会 rebuild；Viewport 也会重新 layout，进而所有的 sliver 也会重新 layout；我们来先看 Viewport layout 的过程：这个方法的核心，首先找到当前的 center sliver（默认是第一个child）的位置，然后向上、向下遍历Viewport每一个sliver；每个 child sliver 根据当前 Viewport 在 Scrollv...
代码里NestedScrollView的body嵌套的是ListView, 前面我们介绍了ListView本身就是Viewport+Scrollable+SliverList组合,而NestedScrollView本身也有NestedScrollViewViewport。 「所以NestedScrollView的实现本质上其实就是Viewport嵌套Viewport,会有两个Scrollable的存在」,并且嵌套的ListView是被放在了NestedScrollView的Sliver里面,大致如...
从这个例子可以看出,「RenderSliver在实现可滑动列表的开销和逻辑上,会比直接使用RenderBox好和灵活很多」,同时也是为什么Viewport里需要使用RenderSliver而不是RenderBox的原因。 ❝⚠️注意,这里比较容易有一个误区,那就是ListView是由Viewport+Scrollable和一个RenderSliver组成,所以在「ListView里只会有一个RenderSlive...
Viewport:它主要提供的是一个“视窗”的作用,也就是列表所在的可视区域大小; Scrollable:它主要通过对手势的处理来实现滑动效果,滑动里面的 Sliver Sliver: 准确来说应该是RenderSliver,它主要是用于在 Viewport 里面布局和渲染内容,例如 SliverList 以ListView为例,如上图所示是ListView滑动过程的变化,其中: 绿色的View...
黄色的部分就是 SliverList ,当我们滑动时其实就是它在 Viewport 里的位置发生了变化; 了解完这个基础理念后,就可以知道一般情况下Viewport和Scrollable的实现都是很通用的,所以一般在Flutter 里要实现不同的滑动列表,就是通过自定义和组合不同的Sliver来完成布局。
所以,如果想要使用Sliver系列的组件,就需要给它们添加滚动模型。Flutter提供了CustomScrollView,做为Sliver系列组件运行的容器。CustomScrollView主要的作用就是提供Viewport和一个公共的Scrollable,多个Sliver组件共用CustomScrollView的Scrollable,就达到了单一滚动的场景。
Flutter 中的可滚动主要由三个角色组成:Scrollable、Viewport和Sliver: Scrollable :用于处理滑动手势,确定滑动偏移,滑动偏移变化时构建 Viewport 。 Viewport:显示的视窗,即列表的可视区域; Sliver:视窗里显示的元素。 具体布局过程: Scrollable 监听到用户滑动行为后,根据最新的滑动偏移构建 Viewport 。
黄色的部分就是SliverList, 当我们滑动时其实就是它在Viewport里的位置发生了变化; 了解完这个基础理念后,就可以知道一般情况下Viewport和Scrollable的实现都是很通用的,所以一般在Flutter 里要实现不同的滑动列表,就是通过自定义和组合不同的Sliver来完成布局。
在Flutter中,ListView是一个高性能的滚动容器,用于展示一个列表。它可以根据内容的大小自动进行滚动,并且支持上下滑动、左右滑动等操作。ListView的实现是基于Viewport的,Vie...
在接收到滚动事件时,参数类型为ScrollNotification,它包括一个metrics属性,它的类型是ScrollMetrics,该属性包含当前ViewPort及滚动位置等信息: 1. pixels:当前滚动位置。 2. maxScrollExtent:最大可滚动长度。 3. extentBefore:滑出ViewPort顶部的长度;此示例中相当于顶部滑出屏幕上方的列表长度。