如下所示，我定义了一组列表项组件，并将他们放在了垂直滚动的ListView中： ListView( children: [ //设置ListView组件的标题与图标...在ListView中，有两种方式支持分割线： 一种是，在itemBuilder中，根据index的值动态创建分割线，也就是将分割线视为列表项的一部分； 另一种是，使用ListView的另一个构造方法，...在CustomScrollView中，这些彼此独立的、可滚动的Widget被称为Sliver。...在Flutter中，因为Widget并不是渲染到屏幕的最终视觉元素（RenderObject才是），所以我们无法像原生的iOS或Android一样，向持有的Widget对象获取或设置最终渲染相关的视觉信息...总结 在处理展示一组连续、可滚动的视图元素的场景中，Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。
CustomScrollView就像一个粘合剂，将多个组件粘合在一起，具统一的滚动效果。...相互嵌套场景 在实际业务场景中经常见到这样的布局，顶部是网格布局（GridView），然后是列表布局（ListView），滚动的时候做为一个整体，此场景是无法使用GridView+ListView来实现的...primary设置为true时，不能设置controller，因为primarytrue时，controller使用PrimaryScrollController，这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为...，例如，Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。...(20.0); CustomScrollView( controller: _scrollController, ... ) physics表示可滚动组件的物理滚动特性，系统提供的ScrollPhysics
概述 CustomScrollView：一个滚动的容器，改组件不接受任何 child，但是你可以直接提供 Slivers 已创建各种滚动效果，例如页面中有多个可滑动的列表，如 Appbar， 列表，网格...系列，如果要将一个普通的组件放在里面，必须使用 SliverToBoxAdapter 进行适配才行 简单的使用 class _MyHomePageState extends State中，如果存在多个列表的话也是支持动态加载的，而不是会一次性全部渲染完 各式各样的 Slivers 组件 SliverList 在上面的例子中 SliverList 使用的是 SliverChildBuilderDelegate...这个delegate，它可以实现动态加载，当然 SliverList 中也有和 ListView 中一样的非动态加载的delegate，就是SliverChildListDelegate SliverList...hasScrollBody: false, child: Center( child: CircularProgressIndicator(), ), ) 复制代码 hasScrollBody ：当前组件中是否有可滚动的组件
本篇不是教你如何使用 API ，而是一些日常开发中不常接触，但是很重要的内容。...） 对 item 多出的蓝色 8-9 部分，这是因为在 SliverConstraints 内会有一个叫 remainingCacheExtent 的参数，它表示了需要提前缓存的布局区域， 也就是“...最后顺便聊下 CustomScrollView ，事实上就是一个开放了可自定义配置 RenderSliver 数组的滑动控件，例如： 通过利用 SliverList + SliverGrid 就可以搭配出多样化的滑动列表...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配； ?...SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 的高度； 使用 SliverOverlapInjector 将这个高度配置到 body 列表中，让列表知道顶部存在一个固定高度的区域
「本篇不是教你如何使用 API ，而是一些日常开发中不常接触，但是很重要的内容」。...layoutExtent ） 对 item 多出的蓝色 8-9 部分，这是因为在 SliverConstraints 内会有一个叫 remainingCacheExtent 的参数，它表示了需要提前缓存的布局区域...最后顺便聊下 CustomScrollView ，事实上就是一个「开放了可自定义配置 RenderSliver 数组的滑动控件」，例如： 通过利用 SliverList + SliverGrid 就可以搭配出多样化的滑动列表...最后在 _NestedScrollCoordinator 的 drag 和 applyUserOffset 等方法里进行内外滚动的分配； image.png SliverPersistentHeader... SliverOverlapAbsorber 用于吸收 SliverPersistentHeader 的高度； 使用 SliverOverlapInjector 将这个高度配置到 body 列表中，让列表知道顶部存在一个固定高度的区域
介绍一下 5 个新的 Sliver 组件 在 Flutter 3.13 更新中，增加了 5 位新的 Sliver 相关组件，用于滑动视口中，完成特定功能。这篇文章将介绍一下它们的作用和使用场景。...有些场景下，我们期望交叉轴方向可以排若干个 Sliver 滑块，共同响应滚动，特别是像宽度充裕的桌面端。 如下所示，左中右三块 SliverList 水平排布，共同滑动。...比如竖直方向滑动中，他就类似于 Row 组件，将 Sliver 孩子们水平排列。其中: SliverConstrainedCrossAxis：指定滑片的交叉轴尺寸。...案例中需要准备三个 SliverList 的滑块，为了简单起见，这里简单封装一个 SliverColorList 用于构建滑块组件，可指定色块颜色、条目高、条目数量等： class SliverColorList...解决的场景是: 在交叉轴方向，需要摆放若干个滑块时，这些滑块可以共同滚动。 ---- 4.
和尚尝试了两种解决滑动冲突的方案，仅记录一下基本的使用方式。和尚翻译很不到位，可重点看代码。...sliver 代表具有特定滚动效果的滚动模型，sliver 本身不包含滚动交互模型，需要通过 CustomScrollView 连接为一个整体。...sliver 有众多具体的 Widget，和尚也在尝试过程中。 ?...shrinkWrap 常用于内容大小不确定情况，如果滚动视图(ListView/GridView/ScrollView 等)没有收缩包装，则滚动视图将扩展到允许的最大大小。...primary 如果为 true，即使滚动视图没有足够的内容来支撑滚动，滚动视图也是可滚动的。否则，默认为 false 情况下，只有具有足够内容的用户才能滚动视图。 ?
()来创建相应的Element对象，最后将这些对象组建成Element树； 接下来会创建第三个树，这个树中包含了与Widget对应的Element通过createRenderObject()创建的RenderObject...它的常用状态包括 resumed、inactive、paused 这三个。 resumed：可见的，并能响应用户的输入。 inactive：处在不活动状态，无法处理用户响应。...通过 NotificationListener 则： 可以监听其子 Widget 中的任意 ListView； 不仅可以得到这些 ListView 的当前滚动位置信息，还可以获取当前的滚动事件信息 。...单子 Widget 布局：Container、Padding 与 Center Container 容器与 Center 容器底层都依赖了同一个容器 Align，通过它实现子 Widget 的对齐方式。...资源描述文件放在 res/values 目录下，原始文件放在 assets 目录下等。
本文将通过一个需求场景，介绍一个非常实用的 Flutter 列表滑动知识点，该问题来源于网友的咨询。...这有什么困难的？ 理论上确实没什么问题，但是有一个需求场景，却会出现一个无法修复的问题，那就是：聊天列表需要双向插入数据。 双向插入数据会导致 ListView 什么问题？...在 《不一样角度带你了解 Flutter 中的滑动列表实现》 我们讲过，Flutter 的滑动列表效果主要有三部分组成： Viewport ： 它提供的是一个“视窗”的作用，也就是列表所在的可视区域大小...（绿色部分），就会把原本的 SliverList 数据往后顶上去，从而产生了 SliverList 的位置发现变化。...如下面代码所示，因为聊天列表的场景，我们的列表是 reverse 的，所以需要将新数据的 SliverList 放在 centerKey 的上面，把旧数据的 SliverList放在 centerKey
虽然我们可以用一个固定的组件来做为AppBar，但是这样就会丢失很多特效，比如将AppBar固定在顶部，AppBar可以在滑动的过程中进行大小变换等。...pinned表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。...snapsnap是和floating一起使用的属性，snap表示当向SliverAppBar滚动的时候，SliverAppBar是否立即展示完全。...最后运行可以得到下面的界面：默认情况下SliverAppBar是展开状态，如果我们将下面的SliverList向上滑动，flexibleSpace就会被隐藏，我们可以得到下面的界面：当我们向上慢慢滑动的时候...总结简单点说，SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。
虽然我们可以用一个固定的组件来做为AppBar，但是这样就会丢失很多特效，比如将AppBar固定在顶部，AppBar可以在滑动的过程中进行大小变换等。...pinned 表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。...snap snap是和floating一起使用的属性，snap表示当向SliverAppBar滚动的时候，SliverAppBar是否立即展示完全。...最后运行可以得到下面的界面： 默认情况下SliverAppBar是展开状态，如果我们将下面的SliverList向上滑动，flexibleSpace就会被隐藏，我们可以得到下面的界面： 当我们向上慢慢滑动的时候...总结 简单点说，SliverAppBar就是一个在滑动中可变大小的AppBar,我们可以通过设置不同的参数来实现不同的效果。
当 ListView 在一个无边界(滚动方向上)的容器中时， shrinkWrap 必须为 true addAutomaticKeepAlives：该属性表示是否将列表项（子组件） 包裹在 AutomaticKeepAlive...组件中； 典型的，在一个懒加载的列表中，如果将列表包裹在 AutomaticKeepAlive 中，在改了吧划出视口时，他也不会被 GC 回收(垃圾回收)，他会使用 KeepAliveNotification...，这个时候就可以使用 CustomScrollView，他相当于一个胶水，将这些彼此独立的可滚动组件粘起来。...但是在 Custom 中，需要粘起来可滚动的组件就是 CustomScrollView 的 Sliver 了，如果将 ListView 或者 GridView 作为 CustomScrollView...因此，为了能让可滚动组件能和 CustomScrollView 配合使用，Flutter 提供了一下可滚动组件的 Sliver 版，如 SliverList，SliverGrid 等，实际上 Sliver
，本例中，从2019年8月开始算起，结束时间是2020年8月，然后又有2个参数selectedStartDate和selectedEndDate，这2个参数是给定的默认选中区间，本例中默认选中了2019...笔者在实现该功能时把MonthView作为SliverList的一个build item。...放置到CustomScrollView的Sliver里面，这里复习一下，Sliver的作用其实就是“粘合剂”的作用，把多个组件粘合起来形成一个滚动区域，布局如下： CustomScrollView(...true : false; } 复制代码 上述代码可以说是一部分核心逻辑，会根据CalendarList传入的选择区间通过DateTime moment进行筛选，如果是在区间范围内...其他各种布局技巧及细节 可以改善的地方 国际化支持 自定义颜色传入 后续发布到Flutter Pub 代码地址 本例中相关的代码放在 github地址：github.com/heruijun/fl…
观察动画 商品详情页 我们发现，商品详情页的动画效果，有点像是MD内，appbar放一张图片，然后完全滚动遮盖的效果。...SliverAppBar中的flexibleSpace来存放appBar内显示的其他控件 默认的 SliverAppBar的pined为false，故他会跟着滚上去。...我们这里需要根据滚动的量去改变FlexibleSpaceBar内我们创建的logo和图标的大小。...expandedHeight: _kAppBarHeight, backgroundColor: Colors.teal, //将原来放在...看到这样一个，不属于自带效果的动画，我们刚刚开始确实无法入手。 遇到这样的方法，最简单的也是最耗时方式就是降维。就像本编文章一样，花了大量的事件，先完成静态简单的熟悉的页面。再完成动态的效果。
而本文的内滚动布局，就是万千经验中的一小个。 2. 管理系统 “管理系统”意味着站点以强交互为主，会有很多类似办公软件的交互操作在里面。...或者这么说吧，把所有页面内容放在一个page中，此时page就好比一个可以移动的房子，回头你跳槽来腾讯了，房子可以一起带过来，原来的位置可以被其他房子代替。...但是，你如果直接放在中，由于只能是一个，不动产，此时想要做整体迁移，难度就较大，同时项目几乎成型，全局修改成本高高风险大。...100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。...filter */ filter: none; } HTML结构示意如下： 此时，弹框在一个可滚动的容器之中
6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。...目前，可滚动组件中的大部分组件都支持基于Sliver的延迟构建模型，如ListView、GridView。...如果一个可滚动组件支持Sliver，那么该可滚动组件可以将子组件分成多个Sliver，只有当Sliver出现在视图窗口时才会去构建它，从而提高渲染的性能。...CustomScrollView作为容器组件时，子组件不能是ListView、GridView等可滚动组件，会造成滚动冲突。...在实际使用过程中，Flutter提供了SliverList、SliverGrid等可滚动组件的Sliver版本。
图1 CustomScrollView可承载的子布局类型 CustomScrollView是Flutter的SDK提供的实现长列表的控件。...它像一个强大的粘合剂，如图1所示在此控件中我们可以将各种不同的布局，比如列表，网格，瀑布流，吸顶组件等，在其里面组合，实现较为复杂的页面。...尽量将不同职责的内容做了拆分，完成高内聚低耦合，从而能在多变的场景的应用中组合，实现相应的功能。...当用户再继续往上滑动时，本应该滑出可视区域的黄色sliver，因为上面讲的处理，将一直绘制在屏幕上方，因此实现了吸顶效果。 ?...可以看到对于一个有很多数据的列表来说，在本次布局中，只有用户可视范围内的child会参与其中，不在的都会被忽略，从而实现了懒加载，大大提高了绘制性能。
而本文的内滚动布局，就是万千经验中的一小个。 2. 管理系统 “管理系统”意味着站点以强交互为主，会有很多类似办公软件的交互操作在里面。...或者这么说吧，把所有页面内容放在一个page中，此时page就好比一个可以移动的房子，回头你跳槽来腾讯了，房子可以一起带过来，原来的位置可以被其他房子代替。...但是，你如果直接放在中，由于只能是一个，不动产，此时想要做整体迁移，难度就较大，同时项目几乎成型，全局修改成本高高风险大。...100%尺寸的position:absolute/fixed的覆盖层，会覆盖任何非元素(包括)(包括这些元素的滚动条)，因此，只要覆盖+滚动容器改变，页面就无法滚动。...filter */ filter: none;} HTML结构示意如下： 此时，弹框在一个可滚动的容器之中
当ListView在一个无边界(滚动方向上)的容器中时，shrinkWrap必须为true。...当可滚动组件滚动时，将列表项包裹在RepaintBoundary中可以避免列表项重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效...可滚动组件的Sliver版 但是在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了，如果直接将ListView、GridView作为CustomScrollView...因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。...实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型 ，也正因如此，CustomScrollView才可以将多个Sliver
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
