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()
}

输出