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

有人能解释一下flutter中的Sliver和Delegate是什么吗?为什么要使用它们?

在Flutter中,Sliver和Delegate是用于构建高度可定制的滚动效果的两个重要概念。

  1. Sliver: Sliver是Flutter中一个抽象的滚动元素,它可以看作是可滚动区域中的一个独立部分。它可以代表一个可见的屏幕区域,例如列表项或网格项。与常规的Widget不同,Sliver并不直接呈现在屏幕上,而是在滚动视图中根据需要动态创建和销毁。它允许开发者以非常灵活的方式定制滚动行为,并可以与其他Sliver组合来创建复杂的滚动效果。
  2. Delegate: Delegate是Sliver的抽象基类,它定义了用于控制Sliver外观和行为的接口。通过实现不同的Delegate子类,可以定制Sliver的布局、绘制和交互行为。Delegate提供了一系列回调方法,例如:
  • build(BuildContext context, double shrinkOffset, bool overlapsContent): 用于构建Sliver的UI表示。
  • getExtentForScrollOffset(double scrollOffset): 返回给定滚动偏移的Sliver大小。
  • shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate): 用于确定是否重新构建Sliver。

使用Sliver和Delegate的原因如下:

  1. 灵活的滚动效果:Sliver和Delegate的组合提供了丰富多样的滚动效果,可以满足各种复杂的布局需求,例如可折叠的头部、吸顶效果、瀑布流等。
  2. 节约资源:Sliver的动态创建和销毁机制可以根据需要加载和释放滚动元素,有效节约内存和CPU资源。这尤其适用于大型列表或网格等需要高性能的场景。
  3. 可扩展性:通过实现自定义的Delegate子类,可以完全控制Sliver的外观和行为,从而实现高度定制化的滚动效果。

腾讯云相关产品和产品介绍链接地址: 腾讯云提供了一系列云计算相关产品,如云服务器、对象存储、人工智能服务等。具体推荐的产品和链接地址取决于具体的需求和应用场景,可以参考腾讯云官方网站(https://cloud.tencent.com/)获取最新的产品信息和文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 3.13 组件更新 | 欢迎 Slivers 体系 5 位新成员

介绍一下 5 个新 Sliver 组件 在 Flutter 3.13 更新,增加了 5 位新 Sliver 相关组件,用于滑动视口中,完成特定功能。这篇文章将介绍一下它们作用使用场景。...交叉轴分组滑片 可以容纳多个 Sliver 组件,在交叉轴方向上分组 这五个组件使用案例,将在后续加入到开源项目 FlutterUnit ,欢迎大家对项目的关注支持 ~ ---- 2....交叉轴分组相关 Sliver 组件 其中 SliverConstrainedCrossAxis SliverCrossAxisExpanded 用于控制滑片在交叉轴尺寸;有人可能会疑惑,一般来说,...交叉轴方向尺寸不就是视口尺寸为什么需要控制交叉轴方向滑片尺寸呢?...,还是非常简单直观

78520

Flutter 实现完美的双向聊天列表效果,滑动列表知识点

如何在 Flutter 上实现一个聊天列表,相信大家都不会觉得有什么困难,不就是一个 ListView ,然后根据类型显示渲染数据?这有什么困难?...但是如果产品拿着 QQ 聊天问你,为什么别人收到新消息,列表不会跳动?这问题不就来了吗~ 首先分析问题,为什么列表会出现跳动?...在 《不一样角度带你了解 Flutter 滑动列表实现》 我们讲过,Flutter 滑动列表效果主要有三部分组成: Viewport : 它提供是一个“视窗”作用,也就是列表所在可视区域大小...; Scrollable :它主要通过对手势处理来实现滑动效果; Sliver : 准确来说应该是 RenderSliver, 它主要是用于在 Viewport 里面布局渲染内容,比如 SliverList...虽然实现很简单,但是如果不去对 Flutter 滑动列表机制有所了解,就很容易对着 ListvView 陷入僵局,这篇文章也是为了给大家打开思路,提高对 ViewPort Sliver 了解。

1.2K10

Flutter入门指北(Part 8)之Sliver 组件及NestedScrollView

SliverToBoxAdapter 还记得上节最后代码,有使用 SliverToBoxAdapter 这个部件,这个部件只需要传入一个 child 属性。...因为在 CustomScrollView 只允许传入 Sliver 部件,那么类似 Container 等普通部件就不可以使用了,那么这样就需要更多 Sliver 组件才能完成视图,所以为了方便,直接通过...不过 Flutter 也提供了专门部件 SliverPadding 使用方式同 Padding,但是需要传入一个 sliver 作为子类。...SliverPersistentHeader Flutter ,为我们提供了这么一个作为头部部件 SliverPersistentHeader,这个部件可以根据滚动距离缩小高度,有点类似 SliverAppBar...X 7:创建一个指定 handle 一样高度 sliver 部件,这个 handle 同 SliverOverlapAbsorber handle 保持一致即可。

2.1K30

Flutter 滑动探索】第四本小册上线

》 Animation 动画模块 :《Flutter 动画探索 - 流光幻影》 Flutter 滑动探索:《Flutter 滑动探索 - 珠联璧合》 ---- 还会有其他小册上架?...---- 二、为什么选择探索滑动体系 我们日常开发接触到关于滑动知识只是冰山一角,很多人也只是了解 ListView 、PageView 等几个组件使用而已,甚至连 NestScrollView... CustomScrollView 都用不好,遇到 Sliver 就头大,完全不知道该怎么玩。...我在一开始对它们也没有很深刻认识。 当认清 Flutter 滑动体系构成及运作逻辑后,从源码角度去认识这些组件构成用途,自然站在更高维度来使用它们。...向上可以连接到 滑动组件 Widget 层 ,向下可以连接到 手势 Gesture 层 、动画 Animation 层 ;在 视口 Sliver 内容相关实现,还会涉及到 渲染 Rendering

45020

Flutter可滑动组件

Flutter我们可以使用GridView来实现,使用方式ListView也比较相似。...与CustomScrollView 3.1 可滚动组件剖析 Flutter 可滚动主要由三个角色组成:Scrollable、Viewport Sliver: Scrollable :用于处理滑动手势...如果我们想要在一个页面,同时包含多个可滚动组件,且使它们滑动效果统一起来,比如一个滑动视图中包括一个列表视图(ListView),一个网格视图(GridView),且让他们滑动效果统一。...之外还有一些用于对 Sliver 进行布局、装饰组件,它们子组件必须是 Sliver,我们列举几个常用Sliver名称 对应 RenderBox SliverPadding Padding...上面提及部分组件是可滚动组件无关它们主要是为了结合CustomScrollView一起使用,这是因为CustomScrollView子组件必须都是Sliver

7.1K30

不一样角度带你了解 Flutter 滑动列表实现

本篇主要帮助剖析理解 Flutter列表滑动组成,比较通俗易懂方式,从常见 ListView 到 NestedScrollView 内部实现,帮助你更好理解运用 Flutter滑动列表...Viewport Scrollable 实现都是很通用,所以一般在 Flutter 里要实现不同滑动列表,就是通过自定义组合不同 Sliver 来完成布局。...RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 Flutter布局绘制逻辑都在...从这个例子可以看出,RenderSliver 在实现可滑动列表开销逻辑上,会比直接使用 RenderBox 好灵活很多,同时也是为什么 Viewport 里需要使用 RenderSliver 而不是...SliverPersistentHeader 主要是具备 floating pinned 两个属性,它们区别主要在于使用了不同 RenderSliver 实现,而最终不同地方其实就是输出 SliverGeometry

2.1K41

Flutter | Slivers 系列

,等这种就可以直接使用 SliverAppBar,SliverList SliverGrid Slivers 不是单独指一个组件,而是指一个系列,所以以 Sliver 开头组件都是这个系列,但是他们都只能作用于...addRepaintBoundaries, addSemanticIndexes: addSemanticIndexes, ), super( //.... ); 复制代码 那为什么要使用...最主要原因就是可以在 slives 添加多个组件,如在列表上面下面添加更多内容。...这个delegate,它可以实现动态加载,当然 SliverList 也有 ListView 中一样非动态加载delegate,就是SliverChildListDelegate SliverList...在 SliverPrototypeExtentList ,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕上,在运行过程Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸

1.4K11

Flutter | 滚动组件,ListView,GridVIew等

可滚动组件 当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter 就会提示 Overflow 错误,为此,Flutter 提供了多种可滚动组件,用于显示列表长布局; 可滚动组件都直接或间接包含一个...为此,Flutter 中提出了一个 Sliver(薄片) 概念,只有当 Sliver 出现在视口时才会去构建他,这种模型也被称为 基于 Sliver 延时构建模型 。...可滚动组件中有很多都支持 Sliver 延时构建模型,如 ListView,GridView ,但是也有不支持改模型 SingleChildScrollView 主轴纵轴 在滚动组件坐标描述,...ListView 以填充屏幕剩余空间方法?...因此,为了能让可滚动组件 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件 Sliver 版,如 SliverList,SliverGrid 等,实际上 Sliver

8.4K20

Flutter完整开发实战详解(七、 深入布局原理)

作为系列文章第七篇,本篇主要在前文基础上,再深入了解 Widget 布局一些常识性问题。...在第六篇我们知道了 Widget、Element、RenderObject 三者之间关系,其中我们最为熟知 Widget ,作为“配置文件”存在,在 Flutter 功能都是比较单一,属于...( ̄▽ ̄) 一、单子元素布局 在 Flutter 单个子元素布局 Widget ,Container 无疑是被最广泛,因为它在“功能”上并不会如 Padding 等 Widget 那样功能单一...,这是为什么呢?...二、多子元素布局 事实上“多子元素布局”单子元素类似,通过“举一反三”我们就可以知道它们关系了,比如: Row、Colum 都继承了 Flex,而 Flex 继承了MultiChildRenderObjectWidget

1.2K20

不一样角度带你了解 Flutter 滑动列表实现

本篇主要帮助剖析理解 Flutter列表滑动组成,比较通俗易懂方式,从常见 ListView到 NestedScrollView 内部实现,帮助你更好理解运用 Flutter滑动列表...,所以一般在 「Flutter 里要实现不同滑动列表,就是通过自定义组合不同 Sliver 来完成布局」。...RenderSliver 我们都知道 Flutter 整体渲染流程是 Widget -> Element -> RenderObejct -> Layer 这样过程,而 「Flutter布局绘制逻辑都在...从这个例子可以看出,「RenderSliver 在实现可滑动列表开销逻辑上,会比直接使用 RenderBox 好灵活很多」,同时也是为什么 Viewport 里需要使用 RenderSliver ...SliverPersistentHeader 主要是具备 floating   pinned 两个属性,它们区别主要在于使用了不同 RenderSliver 实现,而「最终不同地方其实就是输出

1K30

Flutter 首页必组件NestedScrollView示例详解

昨天Flutter 1.17版本重磅发布,新版本主要是优化性能、修复bug,有人觉得此版本毫无亮点,但也从另一方面体现了Flutter目前针对移动端已经较为完善,想了解具体内容,文末有链接,如果你想升级到最新版本...在普通ScrollView, 如果有一个Sliver组件容纳了一个TabBarView,它沿相反方向滚动(例如,允许用户在标签所代表页面之间水平滑动,而列表则垂直滚动),则该TabBarView...例如,浏览内部列表以滚动到顶部不会导致外部ScrollViewSliverAppBar折叠以展开。...,具体查看ScrollPhysics 交流 Flutter博客地址(近200个控件用法):http://laomengit.com 总结 到此这篇关于Flutter 首页必组件NestedScrollView...文章就介绍到这了,更多相关Flutter 首页必组件NestedScrollView内容请搜索ZaLou.Cn以前文章或继续浏览下面的相关文章希望大家以后多多支持ZaLou.Cn!

3.6K40

Flutter(八)--Flutter渲染逻辑+源码解读Flutter(八)--Flutter渲染逻辑+源码解读

Flutter渲染逻辑+源码浅显解读 前言 flutter渲染引擎-flutter.framework,而真正渲染工作是由skia来做 由于Flutter几乎所有对象都是Widget,那么现在抛出两个问题...: 我们在屏幕上看到就是以Widget为依据渲染?...我们开发创建每一个Widget都会被渲染到屏幕上? 带着这三个问题,开始这篇文章,阅读大概需要8-10分钟。...我们为什么可以在State中使用widget; ComponentElement中有一个mount方法,这个方法类似WidgetcreateElement都是Flutter自行调用,我们只需知道Element...这两个类分别是应用了 Box 协议和 Sliver 协议这两种布局协议所有渲染对象父类,其还扩展了数十个其他几个处理特定场景类,并实现了渲染过程细节,如 RenderShiftedBox

1.5K10

UITableView在Flutter是什么

这样需求,在iOSUITableView实现;而在Flutter,实现这种需求则是列表控件ListView。...我们先来看看ListView怎么。ListView提供了一个默认构造函数ListView,我们可以通过设置它 children 参数,很方便地将所有的子Widget包含到ListView。...如下所示,我定义了一组不同颜色背景组件,将他们宽度设置为140,并包在了水平布局ListView,让它们可以横向滚动: ListView( itemExtent: 140,//item...这时,各自视图滚动布局模型就是相互独立、分离,就很难保证整个页面统一一致滑动效果。 那么,Flutter是如何解决多ListView嵌套时,页面滑动效果不一致问题呢?...在CustomScrollView,这些彼此独立、可滚动Widget被称为Sliver

5.5K10

Flutter 双向聊天列表效果进阶优化

聊天列表是一个很扣细节场景,在之前Flutter 实现完美的双向聊天列表效果,滑动列表知识点》 里,通过 CustomScrollView 配置它 center 从而解决了数据更新时列表跳动问题...运行后也如下图所示,可以看到运行后代码不会再有空白情况,也没有新增数据跳动情况,双向滑动也正常,那你知道为什么?...那有人可能会说,就这?还有什么可以优化小技巧? 比如增加判断列表是否处于底部,决定在接受到新数据时是否滑动到最新消息。...那 extentAfter 参数作用是什么?...事实上在 FixedScrollMetrics 里有 extentBefore 、 extentInside extentAfter 三个参数,它们关系类似下图所示: image 一般情况下:

61340
领券