概览

在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))
)

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

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

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))
)

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

3. 源代码

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

import SwiftUIstruct ContentView: View {@State var outerShadow = false@State var innerShadow = false@State var dropShadow = falsevar 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()}
}

4. 总结

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

最后，感谢观赏，再会 😎