目录最终效果拆开讲讲两层不透明推挤切层全看勾了几项计数动画用自建动画鼠标悬停的高亮为什么不做渐变勾选框滑入与删除按钮的可用性几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的上下文工具栏组件。邮件、文件这类列表，平时顶栏放的是搜索、设置几个常用操作；一旦勾上了若干项，顶栏就得换成「已选几项、全选、删除」这一套多选工具。最终效果工具栏有「普通」和「多选」两种形态，勾上任意一项，整层就横向滑到多选态；取消全部选中，又滑回来，切换过程不重影、不留白。拆开讲讲下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个工具栏就两层加一份统计逻辑，一块一块说。两层不透明推挤工具栏本体是那条白底条，里面叠了两层：普通层和多选层。切换时两层都用水平位移，不碰透明度。切换进度为 0 时普通层横坐标是 0、多选层横坐标是整条宽（在条外）；进度到 1 时反过来。两层宽度都等于整条工具栏宽，所以任意中间态一层进来多少、另一层就出去多少，整条始终被某一层铺满。为什么不做透明度动画？如果两层各做一个透明度动画，交叉点会出现两层同时半透明可见（重影），或两层都未到不透明（空白瞬间）。纯位移没有这种中间态，外层开了裁剪、把滑出条外的部分裁掉即可。// 切换进度：0 = 普通工具栏，1 = 多选工具栏。两层的水平位移都由它派生。 property real sw