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 中应用效果

SwiftUI 支持各种预定义的修饰符,例如阴影、悬停、模糊等,可用于增强视图的外观。因此,只需使用这些修饰符,我们就可以对视图应用效果。我们可以在点运算符的帮助下直接使用这些修饰符,例如 −

Text("TutorialsPoint").blur(radius:12)

示例 1

以下 SwiftUI 程序用于在文本视图上应用模糊效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {            
         // Without any effect
         Text("TutorialsPoint").font(.largeTitle).foregroundStyle(.green)
            
         // With blur effect
         Text("TutorialsPoint")
            .font(.largeTitle)
            .foregroundStyle(.green)
            .blur(radius: 4)
      }.padding()
   }
}
#Preview {
   ContentView()
}

输出

Effects

示例 2

以下 SwiftUI 程序用于在文本视图上应用多种效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         // Without any effect
         Text("TutorialsPoint").font(.largeTitle).foregroundStyle(.green)
            
         // With multiple effects
         Text("TutorialsPoint")
            .foregroundStyle(.green)
            .padding(20)
            .shadow(radius: 5)
            .rotationEffect(.degrees(10))
            .scaleEffect(2.3)
      }.padding()
   }
}
#Preview {
    ContentView()
}

输出

效果

SwiftUI 中的效果类型

SwiftUI 支持以下类型的效果−

S.No 效果 描述
1 scaleEffect() 用于增加或减少视图的大小(水平和垂直)。
2 rotationEffect() 用于在二维平面中围绕给定点旋转视图。
3 tansformEffect() 用于对给定视图应用仿射变换。仿射变换包括视图的旋转、缩放、平移或倾斜。
4 blur() 用于对指定视图应用高斯模糊。
5 shadow() 用于对指定视图应用阴影效果。
6 blendMode() 用于混合两个重叠的视图。
7 hoverEffect() 用于在指定视图上应用悬停效果。
8 colorEffect() 用于在颜色的每个像素上应用滤镜效果。
9 distortionEffect() 用于在给定视图的每个像素上应用几何扭曲效果。
10 layerEffect() 用于在视图的栅格图层。
11 visualEffect() 它用于通过使用几何代理访问视图的布局细节来应用可动画化的视觉效果。
12 adjustColorEffect() 它用于向视图应用基本的颜色效果,例如饱和度、亮度、对比度、色相旋转和颜色乘法。