Qt Quick 圖形效果：Blend 混合模式詳解與示例

Blend 元素介紹

Blend 繼承自 Item，用指定模式混合兩個源 Item（source 和 foregroundSource）。需引入 import QtGraphicalEffects 1.0。

核心屬性

• source：底圖 Item
• foregroundSource：前景圖 Item
• mode：混合模式字符串（如 "multiply", "screen", "overlay" 等 20 種）
• cached：是否緩存輸出，動態源建議關閉

基本用法

Blend {
    anchors.fill: bug
    source: bug
    foregroundSource: butterfly
    mode: "subtract"
}

anchors.fill 讓 Blend 佔據 source 區域。source 和 foregroundSource 可設 visible: false 僅作數據源。

完整示例：模式選擇器

使用 ListView 列出所有模式，點擊項目動態修改 blender.mode 即時預覽效果。代碼包含返回信號、原始圖片展示區、混合效果區。

支持的混合模式

normal, multiply, screen, overlay, darken, lighten, colorDodge, colorBurn, hardLight, softLight, difference, exclusion, hue, saturation, color, luminosity 等。