QML 中的视觉效果组件

在 QML 中，视觉效果组件（Visual Effects）能够为界面元素添加丰富的动态或静态特效，增强用户交互体验。以下是一些关键的视觉效果组件及其典型应用场景：

1. 基础视觉调整类

用于对现有元素的颜色、透明度等基础属性进行修改。

• ColorOverlay

  • 功能：用指定颜色覆盖子项，适用于高亮、状态提示、遮罩等。
  • 示例：半透明的黑色覆盖层表示禁用状态：

Button {
    text: "Submit"
    enabled: false
    ColorOverlay {
        anchors.fill: parent
        color: "rgba(0, 0, 0, 0.5)"
    }
}

• OpacityMask

  • 功能：通过透明度的掩码控制子项的可见区域，常用于不规则裁剪。
  • 示例：圆形头像裁剪：

Image {
    source: "avatar.jpg"
    layer.enabled: true
    layer.effect: OpacityMask {
        maskSource: Rectangle {
            width: 100
            height: 100
            radius: width/2
        }
    }
}

2. 动态效果类

结合动画实现动态交互效果（如悬停、点击反馈）。

• DropShadow

  • 功能：为元素添加投影，提升界面层次感。
  • 示例：卡片阴影效果：

Rectangle {
    width: 200
    height: 100
    color: "white"
    layer.enabled: true
    layer.effect: DropShadow {
        radius: 5
        samples: 16
        color: "#40000000"
    }
}

• Glow

  • 功能：为边缘添加发光效果，常用于按钮或高亮重要元素。
  • 示例：按钮悬停发光：

Button {
    text: "Hover Me"
    background: Rectangle {
        color: "blue"
        layer.effect: Glow {
            samples: 15
            color: "lightblue"
            spread: 0.2
        }
    }
}

3. 滤镜与模糊类

对图像或元素进行模糊、锐化等复杂处理。

• GaussianBlur

  • 功能：实现高斯模糊效果，适用于背景模糊或隐私保护。
  • 示例：对话框背后的模糊层：

Rectangle {
    anchors.fill: parent
    color: "transparent"
    GaussianBlur {
        source: parent
        samples: 16
        radius: 8
        deviation: 4
    }
}

• FastBlur（性能优化模糊）

  • 功能：类似 GaussianBlur，但牺牲部分质量以提升性能，适用于移动端。
  • 示例：

FastBlur {
    radius: 32
}

4. ShaderEffect（自定义着色器）

通过 GLSL 编写自定义特效，实现高级视觉效果。

• 功能：创建动态波浪、扭曲、颜色渐变流水等复杂效果。
• 示例：波浪动画效果：

ShaderEffect {
    property real amplitude: 0.1
    property real frequency: 0.05
    property real time: 0
    NumberAnimation on time { from: 0; to: Math.PI*2; duration: 2000; loops: Animation.Infinite }

    fragmentShader: "
        uniform lowp float qt_Opacity;
        varying highp vec2 qt_TexCoord0;
        uniform float amplitude;
        uniform float frequency;
        uniform float time;
        void main() {
            vec2 uv = qt_TexCoord0;
            uv.y += sin(uv.x * frequency + time) * amplitude;
            gl_FragColor = texture2D(source, uv) * qt_Opacity;
        }"
}

5. 渐变与材质

• LinearGradient / RadialGradient
  • 功能：创建线性/径向渐变背景或遮罩。
  • 示例：按钮渐变色背景：

Rectangle {
    width: 200
    height: 50
    gradient: LinearGradient {
        GradientStop { position: 0; color: "orange" }
        GradientStop { position: 1; color: "red" }
    }
}

---

6. 3D变换与视角效果

• Transform / Rotation / Scale
  • 功能：通过 3D 旋转、缩放改变元素显示方式。
  • 示例：卡片翻转动画：

Rectangle {
    width: 200
    height: 200
    color: "blue"
    transform: [
        Rotation { id: rotation; axis { x: 0; y: 1; z:0 } },
        Scale { xScale: 0.8 }
    ]
    // 动画控制旋转：
    NumberAnimation { target: rotation; property: "angle"; to: 180; duration: 500 }
}

使用注意事项

1. 性能优化

   • 复杂的视觉效果（如多重模糊和动画）可能影响性能，需谨慎在移动端使用。
   • 使用 layer.enabled 或 cache: true 缓存渲染结果。

2. 硬件要求

   • ShaderEffect 需要底层图形 API（如 OpenGL）支持。

3. 组合使用

   • 多个视觉效果可以叠加，例如 DropShadow + GaussianBlur 实现立体卡片效果。

总结

QML 的视觉效果组件为 UI 设计提供了高度灵活性，从基础的色彩调整到复杂的自定义着色器，开发者可以根据具体需求选择合适的效果。关键是根据目标平台性能和用户体验平衡特效的复杂度。