SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


SwiftUI - 混合效果

SwiftUI 中的混合效果用于通过将两个或多个视图相互组合来创建各种 UI 设计。它是创建复杂且视觉上吸引人的设计的强大工具,也可以在 UI 设计中添加各种艺术效果。

使用此效果,我们可以混合任何组件,例如文本、图像、视图、容器等。此外,我们可以混合任意数量的图层,但最低要求是 2,即创建混合效果的基础图层和混合图层。

在本章中,我们将学习如何实现混合效果以及各种示例。

SwiftUI 中的".blendMode"修饰符

在 SwiftUI 中,我们可以借助预定义的 .blendMode 修饰符实现混合效果。此修饰符混合了另外两个视图以创建更美观的设计。它负责前景视图的颜色如何与背景视图的颜色混合。

语法

以下是语法 −

func blendMode(_blendMode:BlendMode) -> some View

此修饰符仅接受一个参数,即 blendMode。它表示我们要应用于给定视图的混合模式。

不同类型的模式

.blendMode 修饰符支持以下混合模式。这些模式可应用于任何包含文本、图像、形状等的视图。

它们分为各种类别,例如正常、变暗、变亮、对比度、反转、混合颜色成分、访问 poter-duff 模式等。

正常:这是 .blendMode 修饰符的默认模式。它不应用任何混合效果

变暗:这些模式用于通过混合源和目标来获得更暗的效果。

  • darken
  • multiply
  • colorBurn
  • plusDarker

Lighten: 这些模式用于对给定的视图应用亮化效果。

  • lighten
  • screen
  • colorDodge
  • plusLighter

Contrast: 这些模式用于在给定的视图上创建对比。

  • overlay
  • softLight
  • hardLight

Invert: 这些模式根据目标颜色反转或取消源颜色。

  • difference
  • exclusion

Mixing Colors: 这些模式用于调整指定源和目标的颜色。

  • hue
  • saturation
  • color
  • luminosity

Poter-duff mode: 这些模式用于将不同类型的蒙版应用于指定 UIcomponenets 中的颜色 −

  • sourceAtop
  • destinationOver
  • destinationOut

示例 1

以下 SwiftUI 程序在 colorBurn 模式下混合两个视图。

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 中,我们不能同时使用多种混合模式修饰符,如果我们尝试这样做,则只有最近的 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()
}

输出

混合效果