QML元素 - Glow

在 QML 中，Glow 是 QtGraphicalEffects 模块提供的一个视觉效果组件，用于为元素添加发光（光晕）效果。以下是其基础知识和使用技巧的详细说明：

1. 基础知识

1.1 导入模块

import QtGraphicalEffects 1.15  // 确保导入正确的版本

1.2 基本结构

Glow 需要绑定一个 source（目标元素），并调整属性控制发光效果：

Glow {
    source: targetElement  // 目标元素（如 Image、Rectangle 等）
    color: "#ff0000"       // 发光颜色
    radius: 8              // 发光半径（范围）
    spread: 0.5            // 发光扩散强度（0~1）
    samples: 16            // 采样点数（影响平滑度）
}

1.3 关键属性

• color: 发光颜色（默认 "white"）。
• radius: 发光半径（范围越大，光晕越宽，性能开销增加）。
• spread: 发光扩散强度（0 表示集中在边缘，1 完全扩散）。
• samples: 采样点数（数值越大，效果越平滑，但性能越低）。
• transparentBorder: 是否允许透明边框（避免边缘锯齿，默认 true）。

2. 使用技巧

2.1 优化性能

• 控制 radius 和 samples
  较大的 radius 和 samples 会导致性能下降，尤其在移动端。建议 samples 设为 radius * 2（如 radius: 8 → samples: 16）。

• 动态开关效果
  当不需要发光时，设置 visible: false 以禁用渲染：

  Glow {
      visible: element.isHovered  // 仅在悬停时激活
      // ...
  }
  

2.2 视觉效果调整

• 柔和光晕
  使用较大的 radius 和较小的 spread（如 radius: 16, spread: 0.2）。

• 强烈边缘光
  较小的 radius 和较高的 spread（如 radius: 4, spread: 0.8）。

• 颜色叠加
  结合 color 属性实现不同氛围效果（如红色警告光、蓝色科技光）。

2.3 动画效果

通过 Behavior 或 PropertyAnimation 实现动态光晕：

Glow {
    id: glowEffect
    radius: 8
    NumberAnimation on radius {
        running: targetElement.hovered
        to: 16
        duration: 200
    }
}

2.4 与其他效果组合

Glow 可以与其他效果（如 DropShadow、ColorOverlay）叠加：

Item {
    Rectangle {
        id: rect
        color: "blue"
        width: 100; height: 100
    }

    Glow {
        source: rect
        radius: 8
        color: "lightblue"
    }

    DropShadow {
        source: rect
        radius: 8
        color: "black"
    }
}

3. 常见问题

3.1 效果不显示

• 检查 source 是否有效且可见。
• 确保父容器有足够空间（光晕可能被裁剪）。

3.2 性能问题

• 避免在列表项或频繁更新的元素上使用 Glow。
• 在移动端优先使用较小的 radius（如 4~8）。

4. 示例代码

import QtQuick 2.15
import QtGraphicalEffects 1.15

Rectangle {
    width: 200
    height: 200
    color: "#333"

    Rectangle {
        id: box
        anchors.centerIn: parent
        width: 100
        height: 100
        color: "cyan"
    }

    Glow {
        source: box
        anchors.fill: box
        radius: 12
        samples: 24
        color: "cyan"
        spread: 0.3
    }
}

5. 注意事项

• 版本兼容性：Qt 5 和 Qt 6 的 QtGraphicalEffects 行为可能略有差异，需参考官方文档。
• 硬件加速：确保 OpenGL 或 Vulkan 渲染后端正常工作（某些平台可能需要配置）。

通过灵活调整参数和结合动画，Glow 可以为界面元素添加生动的视觉效果，但需权衡性能和美观。