浏览器、编辑器这类软件的标签栏，鼠标放上去右边会冒出一个小叉，点一下这个标签就没了。做这种关闭标签不只是删一条数据那么简单，还得让消失有个过渡，剩下的标签自动往前补位。思路就是点小叉先播一段收起动画，等动画播完再真正把标签删掉，这样删除是看得见的。
最终效果
每个标签右边带个小叉，鼠标悬停叉变红；点一下标签先缩小淡出，再从模型里删掉，后面的标签平滑补上来。
拆开讲讲
整个可关闭标签就四块，一块一块说。
关闭按钮是 delegate 里的一个子项
每个 TabButton 里除了文字和背景，还多画了一个小矩形当关闭按钮。给 MouseArea 打开悬停追踪后，就能判断鼠标在不在上面；关闭按钮的颜色和透明度都由这个悬停状态决定——悬停时变红、变实，平时是灰的、半透明。
删除分两步：先收起，再移除
点 × 调的是一段顺序动画，分两段走。第一段用并行动画同时把缩放和透明度收到 0，时长 200 毫秒左右；第二段是一段脚本动作，等动画跑完才真正把这条数据从模型里删掉。
这两步有先后，关键就在这个先后：先播收起动画，动画结束才真正删数据。这条数据在模型里的位置是 delega
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/u011186532/article/details/166469989
