QML TabBar 标签栏交互效果合集

系列文章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 自定义 TabBar3D 翻转标签》切换时把内容区当一张卡片绕竖直中线旋转先转到 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折叠与沉浸式头部》这一篇包含折叠式与沉浸式两种头部标签折叠式标签滚动时由同一个折叠进度统一控制栏体变矮、大标题缩小、背景变白头图跟着内容同向移动最终整个头部收起只剩一条贴在底部的标签栏沉浸式标签初始透明浮在彩色头图之上向下滚动头图被推走、栏底渐变为纯白、文字转深色点击标签平滑滚动到对应分组滚动内容也会反向自动高亮对应标签。从左到右横向滚动标签、折叠式标签、沉浸式标签