系列文章：QML 高级动效实战
专栏地址：https://blog.csdn.net/u011186532/category_13190602.html
目录
- 开篇
- 一、标签管理（3 个示例）
- 二、标签反馈（3 个示例）
- 三、标签造型（5 个示例）
- 四、悬浮工具条（5 个示例）
- 五、指示器动效（4 个示例）
- 六、标签联动（6 个示例）
开篇
这个合集汇总 22 篇 QML 自定义 TabBar 文章，共 26 个效果，分 6 类：
| 子分类 | 示例数 | 核心内容 |
|---|---|---|
| 一、标签管理 | 3 | 动态增删、可关闭、拖拽排序 |
| 二、标签反馈 | 3 | 果冻抖动、3D 翻转、波纹点击 |
| 三、标签造型 | 5 | 梯形、宽度形变、玻璃质感、悬浮阴影、发光 |
| 四、悬浮工具条 | 5 | 浮动胶囊、弧形菜单、底部面板、展开搜索、上下文工具栏 |
| 五、指示器动效 | 4 | 弹性指示条、胶囊选择器、渐变进度条、液态融合 |
| 六、标签联动 | 6 | 垂直导航、横向分类、横向滚动、阅读进度、折叠式标签、沉浸式标签 |
一、标签管理（3 个示例）
这 3 个示例把标签当作数据来管理：增删标签就是增删一条数据，界面自动跟着更新；关闭标签先播完收起动画再从数据里移除；拖拽排序只调整顺序，不重建标签。
系列文章：
- 《QML 自定义 TabBar：动态标签》：标签数量不固定时把标签当作数据来管理——Repeater 把 ListModel 渲染成一个个 TabButton，加标签就是加一条数据，新标签带入场动画；删除按钮在只剩一个时禁用，清空后自动补一条默认标签兜底。
- 《QML 自定义 TabBar：可关闭标签》：每个标签右侧带关闭按钮，点击时先做收起动画，结束后才从数据里移除，其余的标签平滑补位。
- 《QML 自定义 TabBar：拖拽排序》：每个标签有固定卡槽位，拖动只调整顺序表、不重建标签，松手后吸回卡槽；换位时加迟滞量防止在卡槽中间来回抖动，内容索引按标签名查找、不随顺序改变。
从左到右：动态添加/删除标签、可关闭标签、拖拽排序标签
二、标签反馈（3 个示例）
切换标签的瞬间让标签自己动一下，动作结束就恢复原状。这一组包含果冻抖动、3D 翻转换页、波纹扩散三种效果。
系列文章：
- 《QML 自定义 TabBar：抖动标签》：点击时横向与纵向缩放交替变化，一正一反摆动几下并逐次衰减后停稳，不改变标签本身排版。
- 《QML 自定义 TabBar：3D 翻转标签》：切换时把内容区当一张卡片绕竖直中线旋转：先转到 90° 收成一条线，趁此时替换内容，再转回来露出新页面，转完手动把角度归零恢复正面朝向。
- 《QML 自定义 TabBar：波纹点击》：每次点击从鼠标按下位置生成一圈圆形水波，由一个半径值同时决定扩散与淡出，动画结束即销毁；选中项再用弹簧动画推文字缩放和底部指示条宽度。
从左到右：果冻抖动标签、3D 翻转换页标签、波纹点击标签
三、标签造型（5 个示例）
这一组关注标签自身长什么样：轮廓、材质、光效全部用纯 QML 实现，不依赖图片资源，包含梯形、弹性宽度、玻璃质感、悬浮阴影、呼吸发光五种效果。
系列文章：
- 《QML 自定义 TabBar：梯形标签》：标签轮廓不方不圆，改用 Canvas 逐笔绘制梯形；选中时标签撑高，并用一块与内容区同色的遮盖条盖住接缝，切换时遮盖条平滑滑过，和下方卡片连成一体。
- 《QML 自定义 TabBar：宽度形变》：每个标签有选中与未选中两个目标宽度，挂在弹性宽度属性上并配弹簧动画，选中项变宽、其余变窄，整排标签随之重新分配位置。
- 《QML 自定义 TabBar：玻璃质感》：叠加多层半透明白色——一层负责亮边、一层负责反光，用白色叠加模拟磨砂玻璃质感，选中时更亮更实。
- 《QML 自定义 TabBar：悬浮阴影》：标签下方贴一块矩形充当阴影，鼠标移入时标签本体上浮、阴影同步下沉摊大，一上一下错开；移开时弹性落回原位。
- 《QML 自定义 TabBar：发光效果》：选中标签背后垫一块略大的光晕，亮度以呼吸节奏起伏，鼠标靠近时呼吸暂停、光晕更亮，按下时整体微缩，每个标签使用各自的主题色。
从左到右：梯形标签、玻璃质感标签、发光标签
四、悬浮工具条（5 个示例）
这一组标签栏不依附内容区，浮在内容之上当工具栏用：点击圆钮展开成胶囊或弧形菜单、从底部滑入面板、在原位展开搜索框、随多选切换形态。展开和收回都由同一个进度或布尔变量控制。
系列文章：
- 《QML 自定义 TabBar：浮动胶囊》：常用操作收进右下角一个圆形按钮，点击后横向展开成胶囊形工具栏，内部图标依次出现、加号旋转成叉；再次点击整条收回，展开状态由一个布尔变量统一控制。
- 《QML 自定义 TabBar：弧形菜单》：点击右下角圆钮后，多个操作按钮沿四分之一圆弧从上方依次散开到左侧，展开位置由同一个展开进度计算；收起时按钮叠回圆钮后方，并同步关闭其点击响应，避免透明按钮误拦截操作。
- 《QML 自定义 TabBar：底部面板》：平时隐藏，点击触发后从屏幕底部滑入，背后压一层遮罩，面板内操作图标依次出现；点击遮罩或操作项即可收回，面板高度由内容自动撑开，只占底部一条。
- 《QML 自定义 TabBar：展开搜索》：工具栏平时只显示搜索图标，点击后输入框在原位横向展开，右侧图标让位、取消按钮出现；再次点击取消则全部归位，让出的图标会同步关闭点击，避免挡住输入框。
- 《QML 自定义 TabBar：上下文工具栏》：它有普通与多选两种形态，勾选任意一项即整层切到多选态，取消全部再切回普通态；普通态和多选态分两层并排摆放，切换时整层一起推拉过去。
从左到右：浮动胶囊工具栏、弧形菜单、上下文工具栏
五、指示器动效（4 个示例）
这一组的主角是选中标记：标签本身不动，让标记自己动起来，包含弹性指示条、胶囊选择器、渐变进度条、液态融合四种效果。
系列文章：
- 《QML 自定义 TabBar：弹性指示器》：底部指示条在切换时先冲过头再弹回；位置由选中索引算出来、通过弹簧动画平滑插值，阻尼调得比较低。
- 《QML 自定义 TabBar：胶囊选择器》：外观类似 iOS 分段控件，选中项背后有一块胶囊滑块，点击其他选项时滑块平滑滑到对应位置；外层与滑块都用圆角等于高度一半的矩形，两端自然成半圆，切换时减速停住，不会冲过头。
- 《QML 自定义 TabBar：液态融合指示器与渐变指示》：这一篇包含渐变指示条与液态融合两种指示器动效：渐变指示条把一次移动拆成收缩与展开两步，先在新旧位置之间收成一点、再于新位置展开，更新选中索引要先于启动动画，否则动画与落点会对不上；液态融合用片元着色器做距离场平滑融合，切换时选中块在新旧位置之间拉出一条黏连的液桥、随进度推进逐渐收拢融成一块。
从左到右：渐变进度条、液态融合指示器
六、标签联动（6 个示例）
这一组让标签跟着内容一起动：阅读进度直接绑定内容的滚动位置，折叠头部随滚动收起成一条窄栏，沉浸式标签随滚动渐变，另有横向分类和横向滚动两种列表式标签。
系列文章：
- 《QML 自定义 TabBar：垂直导航与横向分类》：这一篇包含垂直导航与横向分类两种标签：垂直导航竖在左侧，选中项是一条能包住图标和文字的高亮胶囊，位置由索引派生、通过弹簧动画跟随，底部按钮可把导航收成只剩图标的窄条，测量文字宽度要放在组件完成回调中；横向分类把标签与内容分为两层各自独立滚动，仅通过当前选中索引关联，顶部胶囊标签固定不动、点击后下方整组切换卡片并淡入，标签过多时可横向滑动。
- 《QML 自定义 TabBar：横向滚动与阅读进度》：这一篇包含横向滚动与阅读进度两种标签：横向滚动把一排渐变圆环头像做成可左右滑动的列表，点击后下方切换为对应人物的动态，已读状态直接记录在数据里、滑走再滑回也不会丢失；阅读进度标签的进度根据内容滚动位置实时计算，滚到哪进度就是哪，底部图标标签各带一条小进度条，读完对应章节刚好走满并高亮一下。
- 《QML 自定义 TabBar：折叠与沉浸式头部》：这一篇包含折叠式与沉浸式两种头部标签：折叠式标签滚动时由同一个折叠进度统一控制，栏体变矮、大标题缩小、背景变白，头图跟着内容同向移动，最终整个头部收起，只剩一条贴在底部的标签栏；沉浸式标签初始透明浮在彩色头图之上，向下滚动头图被推走、栏底渐变为纯白、文字转深色，点击标签平滑滚动到对应分组，滚动内容也会反向自动高亮对应标签。
从左到右：横向滚动标签、折叠式标签、沉浸式标签
