多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

QML 自定义 TabBar:可关闭标签

QML 自定义 TabBar:可关闭标签 目录拆开讲讲小叉直接画在标签里面删除分两步animDone 不能少宽度给关闭按钮留了位置几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的可关闭标签组件。如图所示:拆开讲讲下面是逐段讲解,完整代码放在文章末尾的「完整代码」里。整个可关闭标签就四块,一块一块说。先看一张时序表,把整段动画的骨架记在心里,再逐块拆:步骤动作缓动作用①收起:scale → 0、opacity → 0scale 用Easing.InQuad(先慢后快)标签缩小淡出,消失过程看得见②脚本动作:tabModel.remove(index)——(脚本动作)动画播完才真删,后面标签平滑补位小叉直接画在标签里面每个TabButton里除了文字和背景,还多画了一个小矩形当关闭按钮。给MouseArea
返回列表