老孟导读：快乐的51假期结束了，切换为努力模式，今天给大家分享CustomScrollView组件，此组件在以后的项目中会经常用到，CustomScrollView就像一个粘合剂，将多个组件粘合在一起，...CustomScrollView CustomScrollView是使用Sliver组件创建自定义滚动效果的滚动组件，使用场景： ListView和GridView相互嵌套场景，ListView嵌套GridView...CustomScrollView就像一个粘合剂，将多个组件粘合在一起，具统一的滚动效果。...primary设置为true时，不能设置controller，因为primarytrue时，controller使用PrimaryScrollController，这种机制带来的好处是父组件可以控制子树中可滚动组件的滚动行为...，例如，Scaffold正是使用这种机制在iOS中实现了点击导航栏回到顶部的功能。
因为在 CustomScrollView 中只允许传入 Sliver 部件，那么类似 Container 等普通部件就不可以使用了，那么这样就需要更多的 Sliver 组件才能完成视图，所以为了方便，直接通过...SliverPadding 那么在 CustomScrollView 中部件之间如何设置间距呢，可能你会想到用 SliverToBoxAdapter 包裹一个 Padding 来处理，当然没问题。...SliverPersistentHeader Flutter 中，为我们提供了这么一个作为头部的部件 SliverPersistentHeader，这个部件可以根据滚动的距离缩小高度，有点类似 SliverAppBar...糟透了的翻译 X 2：最常用的情况，就是在其 headerSliverBuilder 中使用携带 TabBar 的 SliverAppBar（就是使用 SliverAppBar 的 bottom 属性添加...SliverAppbar 的阴影，主要用来提醒内部的内容低于 SliverAppBar （相当于给人一种物理层次感，否则很容易被认为，头部和内容是连接在一起的） 接下来看下 NestedScrollView
概述 CustomScrollView：一个滚动的容器，改组件不接受任何 child，但是你可以直接提供 Slivers 已创建各种滚动效果，例如页面中有多个可滑动的列表，如 Appbar， 列表，网格...CustomScrollView 中。...SliverFixedExtentList 面的子元素中的宽高是动态的，需要手动设置高度，并且这种也不利于性能，所以我们可以使用 SliverFixedExtentList 来控制限制子元素的大小： SliverFixedExtentList...在 slivers 系列中，SliverAppbar 可以说是使用频率比较高的组件了，SliverAppbar 为应用栏提供了自定义滚动行为，下面我们来看一下 class _MyHomePageState...hasScrollBody: false, child: Center( child: CircularProgressIndicator(), ), ) 复制代码 hasScrollBody ：当前组件中是否有可滚动的组件
简介 在上一篇文章我们讲解SliverAppBar的时候有提到过，Sliver的组件一般都用在CustomScrollView中。...要注意的是SliverList并不能指定子widget的extent大小，如果你想指定List中的子widget的extent大小的话，那么可以使用SliverFixedExtentList: class...SliverList和SliverGird的使用 有了上面介绍的SliverList和SliverGird的构造函数,接下来我们具体来看下如何在项目中使用SliverList和SliverGird。...默认情况下SliverList和SliverGird是需要和CustomScrollView一起使用的，所以我们先创建一个CustomScrollView，在它的slivers属性中，放入一个SliverAppBar...总结 在CustomScrollView中使用SliverList和SliverGird，可以实现灵活的呈现效果。
SliverAppBar控件可以实现页面头部区域展开、折叠的效果，类似于Android中的CollapsingToolbarLayout。 先看下SliverAppBar实现的效果，效果图如下： ?...SliverAppBar控件需要和CustomScrollView搭配使用,SliverAppBar要通常放在slivers的第一位，后面接其他sliver控件。...CustomScrollView( slivers: [ SliverAppBar( ), //其他sliver...SliverAppBar中有一个非常重要的参数flexibleSpace，flexibleSpace是SliverAppBar中展开和折叠区域，flexibleSpace与expandedHeight一起使用...floating 设置为true时，向下滑动时，即使当前CustomScrollView不在顶部，SliverAppBar也会跟着一起向下出现 pinned 设置为true时，当SliverAppBar
在CustomScrollView中，这些彼此独立的、可滚动的Widget被称为Sliver。...接下来，我通过一个滚动视差的例子，与你演示CustomScrollView的使用方法。 视差滚动是指让多层背景以不同的速度移动，在形成立体滚动效果的同时，还能保证良好的视觉体验。...对于前两个问题，我们可以使用ScrollController进行滚动信息的监听，以及相应的滚动控制；而最后一个问题，则需要接收ScrollNotification通知进行滚动事件的获取。...介绍完了如何通过ScrollController来监听ListView滚动信息，以及怎样进行滚动控制之后，接下来我们再来看看如何获取ScrollNotification通知，从而感知ListView的各类滚动事件...总结 在处理展示一组连续、可滚动的视图元素的场景中，Flutter提供了比原生Android、iOS系统更为强大的列表组件ListView与CustomScrollView。
包，它实现了一个交错 GridView 的布局模型，可自行了解一下 CustomScrollView CustomScrollView 是可以使用 Sliver 来自定义滚动模型的组件，他可以包含多种滚动模型...，这个时候就可以使用 CustomScrollView，他相当于一个胶水，将这些彼此独立的可滚动组件粘起来。...但是在 Custom 中，需要粘起来可滚动的组件就是 CustomScrollView 的 Sliver 了，如果将 ListView 或者 GridView 作为 CustomScrollView...，SliverAppBar 等是和可滚动组件无关的，他们主要是为了配合 CustomScrollView 一起使用，这是因为 CustomScrollView 的子组件都必须是 sliver 思考...：SliverAppBar 对应 AppBar，两者不同之处在于 SliverAppBar 可以集成到 CustomScrollView 中，SliverAppBar 可以结合 FlexibleSpaceBar
先来简单看下部分效果图： 本文内容可能有点多，但是都很简单，配上效果图味道更佳~ 什么是SliverAppBar SliverAppBar 类似于Android中的CollapsingToolbarLayout...与AppBar大部分的属性重合，相当于AppBar的加强版。 先从最基本的效果开始，一步一步做到全效果。...this.flexibleSpace,//可以理解为SliverAppBar的背景内容区 this.bottom,//SliverAppBar的底部区 this.elevation...body: new CustomScrollView( slivers: [ new SliverAppBar( title:...添加TabBar 在SliverAppBar的bottom属性中添加TabBar，直接改造源码中的例子 var _tabs = []; _tabs = [
3.1 可滚动组件剖析 Flutter 中的可滚动主要由三个角色组成：Scrollable、Viewport 和 Sliver： Scrollable ：用于处理滑动手势，确定滑动偏移，滑动偏移变化时构建...3.2 Flutter 中常用的 Sliver Sliver名称 功能 对应的可滚动组件 SliverList 列表 ListView SliverFixedExtentList 高度固定的列表 指定itemExtent...上面提及的部分组件是和可滚动组件无关的，它们主要是为了结合CustomScrollView一起使用，这是因为CustomScrollView的子组件必须都是Sliver。...这里使用官方的示例程序，将SliverAppBar+SliverGrid+SliverFixedExtentList做出如下界面： class HomeContent extends StatelessWidget...DefaultTabController是一个Widget组件，后面示例中可以看到如何对其进行使用。 5.2 TabBar介绍 源码分析： const TabBar({ Key?
pinned表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。...snapsnap是和floating一起使用的属性，snap表示当向SliverAppBar滚动的时候，SliverAppBar是否立即展示完全。...SliverAppBar的使用上面讲解了SliverAppBar的构造函数和基础属性，接下来我们通过具体的例子来讲解SliverAppBar如何使用。...通常来说SliverAppBar是和CustomScrollView一起使用的，也就是说SliverAppBar会被封装在CustomScrollView中。...CustomScrollView中除了SliverAppBar之外，还可以添加其他的sliver组件。
pinned 表示SliverAppBar在滚动的过程中是否会固定在界面的边缘。...snap snap是和floating一起使用的属性，snap表示当向SliverAppBar滚动的时候，SliverAppBar是否立即展示完全。...SliverAppBar的使用 上面讲解了SliverAppBar的构造函数和基础属性，接下来我们通过具体的例子来讲解SliverAppBar如何使用。...通常来说SliverAppBar是和CustomScrollView一起使用的，也就是说SliverAppBar会被封装在CustomScrollView中。...CustomScrollView中除了SliverAppBar之外，还可以添加其他的sliver组件。
CustomScrollView CustomScrollView是可以使用Sliver来自定义滚动模型（效果）的组件。...如果使用GridView+ListView来实现的话，就不能保证一致的滑动效果，因为它们的滚动效果是分离的，所以这时就需要一个”胶水”，把这些彼此独立的可滚动组件”粘”起来，而CustomScrollView...可滚动组件的Sliver版 但是在CustomScrollView中，需要粘起来的可滚动组件就是CustomScrollView的Sliver了，如果直接将ListView、GridView作为CustomScrollView...因此，为了能让可滚动组件能和CustomScrollView配合使用，Flutter提供了一些可滚动组件的Sliver版，如SliverList、SliverGrid等。...”粘”在一起，这些Sliver共用CustomScrollView的Scrollable，所以最终才实现了统一的滑动效果。
简介对于一个前端框架来说，除了各个组件之外，最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout，就是用来描述如何将组件进行摆放的一个约束。...ListBody — 根据给定的axis来布局child。ListView — 可滚动的列表。Row — 表示一行child。Stack — 栈式布局的组件。Table — 表格形式的组件。...CustomScrollView — 可以自定义scroll效果的ScrollView。SliverAppBar — material风格的app bar,其中包含了CustomScrollView。...SliverChildListDelegate — 使用list来为livers提供child的委托。SliverFixedExtentList — 固定axis extent的sliver。...要注意的是，Flex是不可滚动的，如果Flex中的child太多，超出了Flex中的可用空间，那么Flex将会报错，所以如果你需要展示很多child的情况下，可以考虑使用可滚动的组件，比如ListView
「本篇不是教你如何使用 API ，而是一些日常开发中不常接触，但是很重要的内容」。...所以在 Flutter 里： ListView 使用的是 SliverFixedExtentList 或者 SliverList； GridView 使用的是 SliverGrid； PageView... RenderSliver 需要使用 CustomScrollView。...最后顺便聊下 CustomScrollView ，事实上就是一个「开放了可自定义配置 RenderSliver 数组的滑动控件」，例如： 通过利用 SliverList + SliverGrid 就可以搭配出多样化的滑动列表...，那他们之间是滑动关系是如何处理的？
，不知道长什么样子的童鞋问下周围的小伙伴如何？...首先我们使用了NestedScrollView中的headerSliverBuilder属性添加了SliverAppBar 然后我们设置展开的高度为200，不让标题栏随着滑动滚动出可视区域 我们使用flexibleSpace...当然我们是希望这个TabBar在SliverAppBar下方，并且随着SliverAppBar滚动的，但是我们还是来看下效果吧 ?...但是有童鞋就问问了，我们怎么让这个SliverPersistentHeader中的内容（TabBar）不随着ListView的滚动而滑动呢？...本期小结 ---- 熟悉SliverAppBar的用法 了解CustomScrollView的用法 了解SliverPersistentHeader的用法
本篇不是教你如何使用 API ，而是一些日常开发中不常接触，但是很重要的内容。...所以在 Flutter 里： ListView 使用的是 SliverFixedExtentList 或者 SliverList； GridView 使用的是 SliverGrid； PageView...RenderSliver 需要使用 CustomScrollView 。...，那他们之间是滑动关系是如何处理的？...NestedScrollView 里使用的 SliverAppBar，本质上 SliverAppBar 的实现靠的就是 SliverPersistentHeader。
今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图的组件，其滚动位置是固有链接的。...在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...内部的任何列表都不会相互作用 与外部ScrollView。...例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...(20.0); CustomScrollView( controller: _scrollController, ... ) physics表示可滚动组件的物理滚动特性，系统提供的ScrollPhysics
在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...内部的任何列表都不会相互作用 与外部ScrollView。...例如，浏览内部列表以滚动到顶部不会导致外部ScrollView中的SliverAppBar折叠以展开。...与TabBar配合使用 用法如下： NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled...; CustomScrollView( controller: _scrollController, ... ) physics表示可滚动组件的物理滚动特性，具体查看ScrollPhysics
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。...6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。...在实际使用过程中，Flutter提供了SliverList、SliverGrid等可滚动组件的Sliver版本。...= true,//是否保持滚动位置 this.debugLabel, }) 当keepScrollOffset的属性值为true时，可滚动组件的滚动位置会被存储到PageStorage中，当可滚动组件重新创建时可以使用...分层渲染可以降低视图渲染带来的性能开销。 无论是创建组合组件还是创建自绘组件，首先需要考虑如何将复杂的布局简化，把大问题拆分成若干小问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
