SwiftUI - 混合效果

---

---

SwiftUI 中的混合效果用於透過將兩個或多個檢視相互組合來建立各種 UI 設計。它是一個強大的工具，可以建立複雜且視覺上吸引人的設計，或者可以在 UI 設計中新增各種藝術效果。

使用此效果，我們可以混合任何元件，例如文字、影像、檢視、容器等。此外，我們可以混合任意數量的圖層，但最低要求是 2 個，即一個基礎圖層和一個混合圖層來建立混合效果。

在本章中，我們將學習如何實現混合效果以及各種示例。

SwiftUI 中的“.blendMode”修飾符

在 SwiftUI 中，我們可以藉助預定義的.blendMode修飾符來實現混合效果。此修飾符混合兩個或多個檢視以建立更美觀的裝飾。它負責前景檢視的顏色如何與背景檢視的顏色混合。

語法

以下是語法：

func blendMode(_blendMode:BlendMode) -> some View

此修飾符僅接受一個引數，即 blendMode。它表示我們想要應用於給定檢視的混合模式。

不同型別的模式

.blendMode修飾符支援以下混合模式。這些模式可以應用於包含文字、影像、形狀等的任何檢視。

它們分為多種類別，例如正常、變暗、變亮、對比度、反轉、混合顏色元件、訪問 poter-duff 模式等。

正常：它是 .blendMode 修飾符的預設模式。它不應用任何混合效果

變暗：這些模式用於透過混合源和目標來獲得更暗的效果。

• 變暗
• 正片疊底
• 顏色加深
• 更暗色

變亮：這些模式用於對給定檢視應用變亮效果。

• 變亮
• 濾色
• 顏色減淡
• 更亮色

對比度：這些模式用於在給定檢視上建立對比度。

• 疊加
• 柔光
• 強光

反轉：這些模式根據目標顏色反轉或取消源顏色。

• 差值
• 排除

混合顏色：這些模式用於調整指定源和目標的顏色。

• 色相
• 飽和度
• 顏色
• 亮度

Poter-duff 模式：這些模式用於對指定 UI 元件中存在的顏色應用不同型別的蒙版：

• 源上方
• 目標之上
• 目標之外

示例 1

以下 SwiftUI 程式以顏色加深模式混合兩個檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.colorBurn)
      }
   }
}

#Preview {
   ContentView()
}

輸出

示例 2

以下 SwiftUI 程式以變暗模式混合兩個檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.darken)
      }
   }
}

#Preview {
   ContentView()
}

輸出

示例 3

以下 SwiftUI 程式以濾色模式混合兩個檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.screen)
      }
   }
}

#Preview {
   ContentView()
}

輸出

SwiftUI 中的多個混合模式

在 SwiftUI 中，如果我們嘗試這樣做，則不能將多個 blend mode 修飾符一起使用，因為只有最近的 blendMode() 修飾符將起作用，其餘修飾符將被丟棄。

struct ContentView: View {
   var body: some View {
      ZStack {
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.darken)
            .blendMode(.destinationOut)
            .blendMode(.colorBurn)
      }
   }
}

這裡將執行 blendMode(.darken)，並且 .blendMode(.destinationOut) 和 .blendMode(.colorBurn) 將被丟棄。如果我們想要使用多個混合模式，則必須在不同的圖層中使用它們。

示例

以下 SwiftUI 程式使用多個 blendMode() 修飾符。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
         Image("wallpaper")
            .resizable()
            .frame(width: 390, height: 300)
            .clipShape(Rectangle())
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.colorBurn)
         Rectangle()
            .fill(.blue)
            .frame(width: 390, height: 150)
            .blendMode(.hardLight)

      }
   }
}

#Preview {
   ContentView()
}

輸出