Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶

CustomScrollView 效果

1. 关键组件

CustomScrollView, SliverOverlapAbsorber, SliverPersistentHeader

2. 关键内容 TLDR

SliverOverlapAbsorber 包住 pinned为 true 的组件 可以被CustomScrollView 忽略高度。

以下的全部内容的都为了阐述上面这句话。初阶 Flutter 开发知道这句话或许可以节省数天研究时间。

pinned为 true 的组件:SliverPersistentHeaderSliverAppBar

CustomScrollView 忽略高度可以使的其他的 Sliver 组件与 pinnedtrue 的组件有重叠效果

3. 正文

先进行定义 TopBar:顶部栏, TabBar:吸顶的标签栏。 对上说效果进行说明: 刚进入页面时,TopBar 下是透明的,一般业务上用来显示 banner 或者重要的广告。 向上滑动页面,TabBar 滑动到顶部时吸顶 并且位于 TopBar 以下。 代码的结构如下

CustomScrollView(controller: _controller,slivers: <Widget>[/// 顶部栏,固定在顶部SliverOverlapAbsorber(handle: SliverOverlapAbsorberHandle(),sliver: SliverAppBar(pinned: true:...)),/// 比如 Banner,金刚区等SliverToBoxAdapter(child: Image.asset("./assets/images/sky.webp",fit: BoxFit.cover,),),/// 其他一些 Sliver 组件...///吸顶的标签栏SliverPersistentHeader(pinned: true,delegate: TabBarDelegate()),/// 列表SliverList(),],
)

在这里例子中,CutomScrollView 会忽略 SliverOverlapAbsorber 组件高度,使得之后的组件计算开始布局的位置从SliverOverlapAbsorber的上边缘开始计算。这样当 TopBar 透明时可以看到完整的 Banner 大图 。

如何使得 TabBar 吸顶并且位于 TopBar 下面呢,可以使用 SliverAppBar 作为 TopBar, 使用 SliverPersistentHeader 作为 TabBar。将两个组件中的 pinned 属性都设置为 true 之后,当页面上滑时当 TabBar 滑到 TopBar 下方时便会固定住不再向上滑动。

换个便于记忆的简单说法是,在 CustomScrollView 中,如果想要忽略高度用 SliverOverlapAbsorber ,想要吸顶就用 SliverPersistentHeader

TopBar 底部用到大图,为什么不用 SliverAppBarflexibleSpace 属性?

使用 SliverAppBar 的特性需要修改属性较多,而且把 顶部 Banner 与 SliverAppBar 混在一起并不优雅。如果只能用 flexbleSpace 实现可以如此

 SliverAppBar(pinned: true,expandedHeight: 200,title: TopBar()flexibleSpace: FlexibleSpaceBar(collapseMode: CollapseMode.pin,background: Banner(),),
)

TabBar 怎么吸顶的?

TabBar 之所以能吸顶是使用的 SliverPersistentHeader 中使用了 RenderSliverPinnedPersistentHeader

class RenderSliverPinnedPersistentHeader{void performLayout() {
...geometry = SliverGeometry(scrollExtent: maxExtent,paintOrigin: constraints.overlap,paintExtent: math.min(childExtent, effectiveRemainingPaintExtent),layoutExtent: layoutExtent,maxPaintExtent: maxExtent + stretchOffset,maxScrollObstructionExtent: minExtent,cacheExtent: layoutExtent > 0.0 ? -constraints.cacheOrigin + layoutExtent : layoutExtent,hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.);}...
}

吸顶关键是设置 paintOrigin 属性。paintOrigin 注释如下

  /// The visual location of the first visible part of this sliver relative to/// its layout position.

官方的注释说的比较严谨且抽象,我尝试解释下 直译是 sliver 的可见位置相对于布局位置。布局位置可以理解为 sliver 占据的空间,可见位置就是其绘制的位置。如果 paintOrigin 为 0,那么可见位置就是布局位置,就像普通的不吸顶的 sliver 一样。 paintOrigin: constraints.overlap 意为从距离布局位置顶部 constraints.overlap 的距离开始绘制。constraints.overlap 是两个页面重叠的距离,如果当前吸顶组件的上面没有其他可吸顶组件,则这个值就是 0,如何之前有其他的吸顶组件,比如 TopBar 也是吸顶组件,这个值就与 TopBar 的高度相同,如是 TabBar 可以悬停在 TopBar 下面。有时学习为了解释一个概念,又会引入了另外一个新概念,导致复杂度成倍增加,有时甚至会引入几十个甚至几百个新概念,尽管如此,坚持下去,才能真正理解知识,而不是原地空转。

有个 SliverPhysicalParentData.paintOffset 属性 与 paintOrigin 类似的概念也对 sliver 组件的绘制位置有影响。在 吸顶的组件(如 SliverToBoxAdapter )中 paintOffsetSliverConstraint.scrollOffset在 可以悬停吸顶的组件 SliverPersistentHeaderpaintOffsetOffset(0, 0)

final SliverPhysicalParentData childParentData = child!.parentData! as SliverPhysicalParentData;
childParentData.paintOffset = Offset(0, 0);

为什么 SliverOverlapAbsorber 高度会被忽略?

SliverOverlapAbsorber 实际渲染的是 RenderSliverOverlapAbsorber 。在 RenderSliverOverlapAbsorber.performLayout 中设定高度代码如下

child!.layout(constraints, parentUsesSize: true);
final SliverGeometry childLayoutGeometry = child!.geometry!;
geometry = childLayoutGeometry.copyWith(scrollExtent: childLayoutGeometry.scrollExtent - childLayoutGeometry.maxScrollObstructionExtent,layoutExtent: math.max(0, childLayoutGeometry.paintExtent - childLayoutGeometry.maxScrollObstructionExtent),
);

可以看到 SliverOverlapAbsorber 的高度依赖于 child 的信息 scrollExtent - maxScrollObstructionExtent

child 是什么?当 SliverOverlapAbsorber 中包含的 SliverAppBar 属性 pinned 设置为 true 时,child 实际为 RenderSliverPinnedPersistentHeader

  void performLayout() {...geometry = SliverGeometry(scrollExtent: maxExtent,paintOrigin: constraints.overlap,paintExtent: math.min(childExtent, effectiveRemainingPaintExtent),layoutExtent: layoutExtent,maxPaintExtent: maxExtent + stretchOffset,maxScrollObstructionExtent: minExtent,cacheExtent: layoutExtent > 0.0 ? -constraints.cacheOrigin + layoutExtent : layoutExtent,hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.);}

可以看到 scrollExtentmaxExtentmaxScrollObstructionExtentminExtent,当 SliverAppBar 不设置 expandedHeightmaxExtentminExtent 相等,最终 SliverOverlapAbsorber 中的 geometryscrollExtentlayoutExtent 为 0。从而 CustomScrollView 忽略了 SliverOverlapAbsorber 高度。 注意 只有 SliverOverlapAbsorber 包含的 SliverAppBar组件 pinned=true 时才会忽略 SliverAppBar 的高度,并且忽略的部分依据 maxExtentminExtent 相等时才完全忽略。

4. 结语

重要内容总结为一句话和一些 限定语

  • SliverOverlapAbsorber 可以让 CustomScrollView 忽略 其包含的固定组件高度

  • SliverOverlapAbsorber 包含的 SliverAppBar 需要设置为 pinned=true

  • SliverAppBarmaxExtentminExtent 相等时 整个 SliverAppBar 的高度都会被忽略

记住了组件的作用在用到时就可以快速完成大部分工作了,再了解了组件原理就可以更好的完成工作了,当效果偏离预想时也可以纠偏找到正确的思路。

5. 团队介绍

三翼鸟数字化技术平台-商城」负责搭建门店数字化转型工具,包括:海尔智家体验店小程序、三翼鸟工作台APP、商家中心等产品形态,通过数字化工具,实现门店的用户上平台、交互上平台、交易上平台、交付上平台,从而助力海尔专卖店的零售转型,并实现三翼鸟店的场景创新。
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463254.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-30目录1. Step Guided Reasoning: Improving Mathematical Reasoning using Guidance Generation and Step Reasoning摘要研究背…

十款思维导图软件推荐,有适合你的一款!!!

在这个信息爆炸的时代&#xff0c;各种信息交错在一起&#xff0c;如何有效整理并理解大量的信息呢&#xff1f;我是借助思维导图来整理的呢&#xff01;现在&#xff0c;市面上有许多优秀的思维导图制作软件。今天&#xff0c;我就来聊聊这些软件工具的独特之处和它们如何帮助…

【P2-1】ESP8266 WIFI模块STA、AP、STA+AP、TCP/UDP透传工作模式介绍与AT指令介绍

前言:本文对ESP8266 WIFI模块STA、AP、STA+AP、TCP/UDP透传工作模式进行介绍;以及AT指令介绍,包括基础AT指令,WIFI功能AT指令、TCP/IP相关AT指令、常用AT指令实例进行介绍。 ESP8266 WIFI模块的接线及固件烧写可参考我的这篇博客:正点原子ATK-ESP8266 WIFI模块接线及固件…

模型 康威定律(沟通VS技术架构)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。组织结构塑造系统架构。 1 康威定律的应用 1.1 某金融科技公司支付系统的微服务架构 某金融科技公司的支付系统采用微服务架构&#xff0c;团队按照功能模块划分为支付网关团队、账户管理团队、风控…

AppInventor2能否用网络摄像头画面作为屏幕的背景?

// 视频是否可以作为背景&#xff1f; // 有会员提问&#xff1a;能否用网络摄像头的实时画面作为屏幕的背景&#xff1f;就跟这个一样背景全覆盖&#xff1a; 摄像头画面是一个在线的网站链接视频流。 // 原先思路 // 1、目前原生组件无法直接实现这个功能&#xff0c;屏幕…

AI时代,一篇雄文说清楚CPU与GPU的区别

一、CPU与GPU的概念 先说说大家最熟悉的CPU,英文全称Central Processing Unit,中央处理器。 但凡是个人都知道,CPU是计算机的心脏。 运算器和控制器这两个核心功能,都是由CPU负责承担的。 具体来说,运算器(包括加法器、减法器、乘法器、除法器),负责执行算术和逻辑运…

类和对象—上

目录 一、面向过程和面向对象初步认识 1.面向过程介绍 2.面向对象 二、类的引入 1.可以利用关键字struct来定义类的原因 1.1.C可以使用struct来定义类的原因是 2.利用关键字struct定义类及访问类成员的案例 3.使用关键字struct定义结构体、定义类的区别 3.1.C语言的结…

AJ-Report:一款开源且非常强大的数据可视化大屏和报表工具

嗨&#xff0c;大家好&#xff0c;我是小华同学&#xff0c;关注我们获得“最新、最全、最优质”开源项目和工作学习方法 AJ-Report是一个基于Java的开源报表工具&#xff0c;它集成了ECharts、Ant Design Vue等前端技术&#xff0c;致力于为企业提供一站式的数据可视化解决方案…

论文阅读:MultiUI 利用网页UI进行丰富文本的视觉理解

《HARNESSING WEBPAGE UIS FOR TEXT-RICH VISUAL UNDERSTANDING》 利用网页UI进行丰富文本的视觉理解 总结 grounding和QA部分的数据集占比较大、同时消融实验显示其作用相对较大&#xff0c;并且grounding部分作用和效果呈现scaling正相关提供了很多web数据处理成多模态训练…

微服务设计模式 - 断路器模式 (Circuit Breaker Pattern)

微服务设计模式 - 断路器模式 (Circuit Breaker Pattern) 定义 断路器模式&#xff08;Circuit Breaker Pattern&#xff09;是云计算和微服务架构中的一种保护性设计模式&#xff0c;其目的是避免系统中的调用链出现故障时&#xff0c;导致系统瘫痪。通过断路器模式&#xff…

roberta融合模型创新中文新闻文本标题分类

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【基于CNN-RNN的影像报告生成】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实现…

win11安装安卓apk原生应用,并设置网络代理

一、win11安装安卓apk原生应用&#xff0c;查看https://blog.csdn.net/qq_33704787/article/details/123658419https://blog.csdn.net/qq_33704787/article/details/123658419 主要是安装&#xff1a;Windows Subsystem for Android™ with Amazon Appstore 二、使用ABD工具设…

计算机网络(Ⅵ)应用层原理

一些网络应用的例子: E-mail Internaet电话 Web 电子支付 文本信息 搜索 P2P文件共享 流媒体 即时通讯 实时电视会议 .... .... 创建一个网络应用&#xff1a; 1.编程 2.在不同的端系统上运行。 网络应用的体系架构 可能的应用架构 1.客户-服…

【调优方法】——warmup预热

文章目录 什么是warmup?为什么引入warmup&#xff1f;warmup策略1. 线性warmup&#xff08;虚线&#xff09;2. 指数warmup&#xff08;点划线&#xff09; warmup改进参考文献 什么是warmup? warmup是一种学习率预热的方法&#xff0c;是指在训练开始时使用较小的学习率&am…

【Java笔记】1-JDK/JRE/JVM是个啥?

JDK、JRE、JVM可以说是入门必须了解的三个词汇 先说全称 JDK&#xff1a;Java Development Kit&#xff0c;Java开发工具包 JRE&#xff1a;Java Runtime Environment&#xff0c;Java运行环境 JVM&#xff1a;Java Virtual Machine&#xff0c;Java虚拟机 再说关系 JVM⊆J…

阿里云docker安装禅道记录

docker network ls docker network create -d bridge cl_network sudo docker run --name zentao --restart always -p 9982:80 --networkcl_network -v /data/zentao:/data -e MYSQL_INTERNALtrue -d hub.zentao.net/app/zentao:18.5 参考&#xff1a;用docker安装禅道…

uniapp iOS打包证书过期——重新下载证书及更新文件

证书过期&#xff0c;重新生成步骤 关于所需的证书、标识符、描述文件等请查看iOS打包证书申请流程证书有效期为1年 过期提示 生成证书 点击 钥匙串访问 → 证书助理 → 从证书颁发机构请求证书 &#xff1b; 我这里选择 存储到磁盘 &#xff0c;邮件、名称 可自定义&#…

Pandas 数据清洗

1.数据清洗定义 数据清洗是对一些没有用的数据进行处理的过程。很多数据集存在数据缺失、数据格式错误、错误数据或重复数据的情况&#xff0c;如果要使数据分析更加准确&#xff0c;就需要对这些没有用的数据进行处理。 2.清洗空值 DataFrame.dropna(axis0, howany, threshN…

数据结构与算法(1)

一&#xff1a;文章总体结构内容解读 二&#xff1a;绪论 1.1研究&#xff1a; 1.范围 数据结构是一门研究非数值计算的程序设计中计算机的操作对象以及它们之间的关系和操作的学科&#xff1b; 2.计算机解决问题步骤&#xff1a; 1.2基本概念和术语&#xff1a; 1.数据、…

RNN与Self-Attention

文章目录 1. SimpleRNN1.1 h t h_t ht​计算1.2 激活函数 2. SimpleRNNSelf-Attention2.1 状态更新2.2 权重 α α α 1. SimpleRNN 学习视频&#xff1a;https://www.youtube.com/watch?vCc4ENs6BHQw&t0s 对于时序数据&#xff0c;输入输出都不固定&#xff0c;需要ma…