SwiftUI4.0在iOS 16中新添加的inner和drop阴影效果

Posted 2022-08-27 大熊猫侯佩

概览

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

4. 总结

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

最后，感谢观赏，再会 😎