SwiftUI - 阴影效果

阴影效果用于在视图内指定的视图或组件后面应用阴影。它通常用于为视图提供深度。它是 UI 开发中最常用的效果。

它用于创建视图高于背景视图的幻觉，使该视图在所有给定的视图中脱颖而出。它通常与按钮、图像、文本等一起使用，以增强其视觉外观。在 SwiftUI 中，我们可以借助 .shadow() 修饰符创建阴影效果。

SwiftUI 中的 shadow() 修饰符

SwiftUI 提供了一个名为 shadow() 的预定义修饰符，用于在给定视图上创建阴影效果。它可以将阴影效果应用于任何视图，例如图像视图，文本视图，按钮等。

使用此修饰符我们还可以更改阴影的颜色，还可以控制阴影的不透明度。

语法

以下是语法 −

func shadow(color:Color, radius:CGFloat, x:CGFloat, y:CGFloat) -> some View

参数

以下是此修饰符 − 支持的参数

• color: 表示阴影的颜色。默认情况下颜色为黑色。
• radius: 表示阴影的模糊度。如果此参数的值较高，则意味着阴影中的模糊程度更高。
• x: 表示阴影与视图水平偏移的量。
• y: 表示阴影与视图垂直偏移的量。

示例 1

以下 SwiftUI 程序用于将阴影效果应用于给定的形状。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 10)
            .padding(10)
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 50)
            .padding(10)
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 0, x: 10.0, y: 10.0)
            .padding(10)
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(radius: 5, x: 20.0, y: 10.0)
            .padding(10)
      }
   }
}

#Preview {
   ContentView()
}

输出

示例 2

以下 SwiftUI 程序用于在给定的视图上应用彩色阴影效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         
         // 彩色阴影
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(color:.green, radius: 10)
            .padding(10)
         
         // 文本上有阴影
         Text("Hello Swift")
            .font(.largeTitle)
            .shadow(color: .red, radius: 20)
         
         // 图像上有阴影
         Image("wallpaper")
            .frame(width: 100, height: 150)
            .clipShape(Circle())
            .shadow(radius: 10)
      }
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的内阴影

在 SwiftUI 中，我们可以借助 .inner() 修饰符来设置阴影样式。内阴影主要用于营造视图边缘缩进的错觉。我们还可以借助其他样式修饰符(如 foregroundStyle()、fill() 等)来应用内阴影。它仅适用于文本、图像和形状视图。

示例

以下 SwiftUI 程序用于在给定视图上应用内阴影效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(.red.shadow(.inner(radius: 3, x: 6, y: 6)))
            .frame(width: 150, height: 160)
            .padding(10)
         
      }
   }
}

#Preview {
   ContentView()
}

输出

SwiftUI 中的阴影

在 SwiftUI 中，我们可以借助 .drop() 修饰符来设置阴影样式。它营造出组件从背景中升起的错觉。我们还可以借助其他样式修饰符(如 foregroundStyle()、fill() 等)应用阴影。它仅适用于文本、图像和形状视图。

示例

以下 SwiftUI 程序用于在给定视图上应用阴影效果。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
            .fill(.red.shadow(.drop(radius: 3, x: 6, y: 6)))
            .frame(width: 150, height: 160)
            .padding(10)
         
      }
   }
}

#Preview {
   ContentView()
}

输出