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{
         
         // Colored Shadow
         Rectangle()
            .fill(.red)
            .frame(width: 150, height: 160)
            .shadow(color:.green, radius: 10)
            .padding(10)
         
         // Shadow on text
         Text("Hello Swift")
            .font(.largeTitle)
            .shadow(color: .red, radius: 20)
         
         // Shadow on image
         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()
}

輸出