QML中如何优化Shape组件阴影？实现TabBar阴影匹配设计稿

开发者阿泽

2026-7-16

优化QML TabBar的DropShadow柔和度

针对你TabBar阴影不够柔和、与设计稿存在差异的问题，这里提供几个具体的优化方案：

1. 调整DropShadow核心参数

当前参数的模糊半径过小、扩散范围偏实，建议修改以下关键属性：

增大radius：阴影模糊半径直接决定柔和度，从3调整到8-12区间，值越大边缘越虚化
降低spread：控制阴影的扩散密度，0.2会让阴影过于生硬，改成0.05-0.1更自然
添加轻微垂直偏移：设计稿的阴影通常带点向下偏移（2-3px），增强Tab的悬浮感
给阴影颜色加透明度：如果ReharkUIColor.brand06是纯色，追加透明度值（比如"80"对应半透明），让阴影过渡更柔和

调整后的DropShadow代码：

DropShadow {
    source: myShape  // 改用Shape作为阴影源，避免Item空白区域干扰阴影计算
    anchors.fill: myShape
    radius: 10
    horizontalOffset: 0
    verticalOffset: 2
    color: ReharkUIColor.brand06 + "80"  // 增加透明度
    spread: 0.08
    antialiasing: true  // 显式开启抗锯齿，保证边缘平滑
}

2. 叠加多层阴影模拟渐变效果

单一层阴影无法达到设计稿的细腻度时，可以叠加两层阴影：一层大模糊、低透明度的外阴影，搭配一层小模糊、稍高透明度的内阴影，还原设计稿的渐变阴影质感：

// 外层柔和阴影
DropShadow {
    source: myShape
    anchors.fill: myShape
    radius: 15
    horizontalOffset: 0
    verticalOffset: 3
    color: ReharkUIColor.brand06 + "40"
    spread: 0.05
}

// 内层稍实阴影
DropShadow {
    source: myShape
    anchors.fill: myShape
    radius: 6
    horizontalOffset: 0
    verticalOffset: 1
    color: ReharkUIColor.brand06 + "60"
    spread: 0.1
}