ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

QML 自定义 TabBar:发光效果

QML 自定义 TabBar:发光效果 目录拆开讲讲光晕是一块放大的彩色底呼吸:让透明度自己来回主体颜色取自主题色几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的发光效果组件,如图所示:拆开讲讲下面是逐段讲解,完整代码放在文章末尾的「完整代码」里。整个发光标签就三块,一块一块说。光晕是一块放大的彩色底发光底层用负边距让它比本体每边多出一圈,四面探出彩色,颜色直接取数据项里的主题色字段——每个标签在模型里都自带一个主题色(首页蓝、发现绿、消息橙、我的紫)。它的透明度分三档:没选中时 0、选中时 0.18、选中且鼠标悬停时 0.35,挂个 250 毫秒的Behavior平滑切换。这个例子也没有真模糊,柔光来自这块色块探出本体的边缘和透明度;要做高斯弥散得另接MultiEffect。// 发光底层:负边距让它比本体每边多出一圈,颜色取数据项里的主题色 Rectangle { anchors.fill: parent anchors.margins: -4 radius: 16 color: modelData.color opacity: tabItem.isSelected ? (tabItem.isHovered ? 0.35 : 0.18) : 0 Behavior on opacity { NumberAnimatio
返回列表