QML元素 - RectangularGlow

QML 的 RectangularGlow 是 Qt Quick Effects 模块中专门为矩形元素设计的外发光效果，适用于为卡片、按钮、面板等矩形或圆角矩形添加柔和的边缘光晕，相比通用 Glow 更高效且支持圆角匹配。以下是详细使用技巧和优化指南：

1. 基本用法

import QtQuick 2.15
import QtQuick.Effects 1.15  // 确保模块正确引入

Rectangle {
    width: 200
    height: 100
    color: "white"
    radius: 8  // 圆角半径

    // 应用矩形发光效果
    layer.enabled: true
    layer.effect: RectangularGlow {
        anchors.fill: parent
        glowRadius: 10       // 发光模糊半径（0~32）
        spread: 0.2          // 发光扩散比例（0.0~1.0）
        color: "#4000FF00"   // 发光颜色（带透明度）
        cornerRadius: parent.radius + glowRadius  // 自动匹配圆角
        cached: true         // 启用缓存优化性能
    }
}

关键属性：

• glowRadius：发光模糊半径，控制光晕范围（值越大越扩散）。
• spread：发光扩散比例，0.0 为柔和过渡，1.0 为硬边缘。
• color：发光颜色，推荐使用带 Alpha 通道的颜色（如 #60FF0000）。
• cornerRadius：匹配目标矩形的圆角半径（需手动同步）。
• cached：对静态发光效果启用缓存，减少性能开销。

2. 效果调整

(1) 圆角同步

确保 cornerRadius 与目标矩形一致（需手动计算）：

RectangularGlow {
    cornerRadius: targetRect.radius + glowRadius  // 动态绑定
    glowRadius: 12
    spread: 0.3
}

(2) 霓虹灯效果

RectangularGlow {
    color: "#80FF00FF"  // 紫色光晕
    glowRadius: 16
    spread: 0.5
}

(3) 边缘高亮

RectangularGlow {
    color: "#40FFFFFF"  // 白色半透明光晕
    glowRadius: 6
    spread: 0.0        // 柔和过渡
}

3. 动态交互效果

(1) 悬停高亮

Rectangle {
    id: card
    width: 200
    height: 120
    radius: 10

    layer.effect: RectangularGlow {
        glowRadius: card.hovered ? 12 : 6  // 悬停时增强光晕
        spread: card.hovered ? 0.3 : 0.1
        Behavior on glowRadius { NumberAnimation { duration: 200 } }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
    }
}

(2) 点击脉冲动画

RectangularGlow {
    id: glowEffect
    glowRadius: 0

    SequentialAnimation on glowRadius {
        loops: Animation.Infinite
        NumberAnimation { to: 16; duration: 1000; easing.type: Easing.OutQuad }
        NumberAnimation { to: 0; duration: 1000; easing.type: Easing.InQuad }
    }
}

4. 性能优化

• 控制 glowRadius：移动端建议 ≤ 16，桌面端可设为 24。
• 启用 cached：静态发光设置 cached: true。
• 降采样处理：

  layer.textureSize: Qt.size(width/2, height/2)  // 纹理尺寸降为50%
  

5. 常见问题

(1) 发光不显示

• 检查 layer.enabled 是否设为 true。
• 确认 color 的 Alpha 值非零（如 #20FFFFFF）。
• 确保 cornerRadius 与目标矩形匹配。

(2) 光晕边缘不自然

• 增加 glowRadius 或 spread。
• 同步调整 cornerRadius（例如 cornerRadius: target.radius + glowRadius）。

(3) 性能卡顿

• 降低 glowRadius 和 samples（默认自动计算）。
• 避免高频动态更新（如每帧动画）。

6. 进阶技巧

(1) 嵌套在复杂布局中

// 卡片布局
Column {
    spacing: 10
    Rectangle {
        id: card1
        width: 200
        height: 100
        radius: 8
        layer.effect: RectangularGlow {
            glowRadius: 10
            cornerRadius: card1.radius + glowRadius
        }
    }
    Rectangle {
        id: card2
        width: 200
        height: 100
        radius: 8
        layer.effect: RectangularGlow {
            glowRadius: 10
            cornerRadius: card2.radius + glowRadius
        }
    }
}

(2) 结合透明度动画

RectangularGlow {
    color: "#60FF0000"
    glowRadius: 12
    opacity: card.active ? 1.0 : 0.5  // 根据状态调整透明度
    Behavior on opacity { NumberAnimation { duration: 300 } }
}

(3) 动态颜色切换

RectangularGlow {
    color: card.error ? "#80FF0000" : "#4000FF00"  // 根据状态切换颜色
    glowRadius: 8
}

7. 与其他发光效果对比

总结

• 核心优势：专为矩形元素优化的高效发光效果，支持圆角同步。
• 关键参数：glowRadius（光晕大小）、color（颜色）、cornerRadius（圆角匹配）。
• 适用场景：现代化 UI 设计中的卡片、浮动按钮、信息面板。
• 优化要点：合理设置 glowRadius 和 cached，动态效果注意性能平衡。