概览

在iOS 16中，SwiftUI又为视图添加了几种阴影，其中就包括 inner 和 drop 两种阴影特效。

如上图所示，我们在iOS16中应用了几种不同阴影效果。

下面，就让我们来看看，究竟如何实现它们吧？😉

1. inner阴影

在iOS 16中，我们可以在视图的foregroundStyle修改器中，应用inner阴影：

VStack {
    Image(systemName: "globe")
        .imageScale(.large)
        .font(.system(size: 100).bold())
    
    Text("hello 大熊猫侯佩🐼")
        .font(.system(size: 50).weight(.black))
}
.foregroundStyle(
    .blue.gradient.shadow(
        .inner(color: innerShadow ? .red : .clear, radius: 10)
    )
)
1
2
3
4
5
6
7
8
9
10
11
12
13

和外部阴影不同的是，内部阴影只会在视图内部渲染，为视图增强内部轮廓。

我们同样可以将内部阴影在任何容器视图上应用，同时为其增加阴影偏移。

2. 堆叠 drop 阴影

除了inner阴影以外，iOS 16还新增了drop阴影，它和外部阴影类似，有趣的是，我们可以将多种阴影效果堆叠在一起使用：

VStack {
    Image(systemName: "globe")
        .imageScale(.large)
        .font(.system(size: 100).bold())
    
    Text("hello 大熊猫侯佩🐼")
        .font(.system(size: 50).weight(.black))
}
.foregroundStyle(
    .blue.gradient.shadow(
        .inner(color: innerShadow ? .red : .clear, radius: 10)
    )
    .shadow(
        .drop(color: dropShadow ? .black.opacity(0.3) : .clear, radius: 5, x: 10, y: 20)
    )
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如上代码，我们混合了inner和drop两种阴影的效果。棒棒哒💯

3. 源代码

注意，以下代码需要在Xcode 14beta中编译：

import SwiftUI

struct ContentView: View {
    
    @State var outerShadow = false
    @State var innerShadow = false
    @State var dropShadow = false
    
    var body: some View {
        VStack(spacing: 20) {
            VStack(spacing: 50) {
                VStack {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .font(.system(size: 100).bold())
                    
                    Text("hello 大熊猫侯佩🐼")
                        .font(.system(size: 50).weight(.black))
                }
                .foregroundStyle(
                    .blue.gradient.shadow(
                        .inner(color: innerShadow ? .red : .clear, radius: 10)
                    )
                    .shadow(
                        .drop(color: dropShadow ? .black.opacity(0.3) : .clear, radius: 5, x: 10, y: 20)
                    )
                )
                
                Image(systemName: "arrow.down.message.fill")
                    .imageScale(.large)
                    .foregroundStyle(
                        .blue.gradient.shadow(
                            .inner(color: innerShadow ? .black : .clear, radius: 10)
                        )
                        .shadow(
                            .drop(color: dropShadow ? .black.opacity(0.3) : .clear, radius: 5, x: 10, y: 20)
                        )
                    )
                    .font(.system(size: 100).bold())
            }
            .shadow(color: outerShadow ? .orange : .clear, radius: 10.0)
            
            HStack {
                Toggle("开启外部阴影", isOn: $outerShadow.animation(.spring()))
                
                Toggle("开启内部阴影(iOS16+)", isOn: $innerShadow.animation(.spring()))
                
            }
            .padding()
            
            HStack {
                Toggle("开启drop阴影(iOS16+)", isOn: $dropShadow.animation(.spring()))
                
                Spacer()
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

4. 总结

在这篇很短的博文中，我们介绍了iOS 16中SwiftUI为我们提供的新阴影效果，大家的武器库中又充实了不少哦。

最后，感谢观赏，再会 😎