如何在SF符号上应用内阴影，使其看起来如图所示？

Question

我一直在尝试在 SwiftUI 中获得这种凹陷效果，但没有任何效果。我尝试了 Shadow(color:radius:x:y:) 修饰符，但它在符号的外部应用了阴影。您能告诉我是否还有其他 API 或技巧可以实现此目的吗？ 谢谢你！

Answer 1

喜欢凹凸效果，让我想起了 iOS 6。关键是finding

inverseMask

，然后我玩了一下，想出了这个：

import SwiftUI

extension View {
    // https://www.raywenderlich.com/7589178-how-to-create-a-neumorphic-design-with-swiftui
    func inverseMask<Mask>(_ mask: Mask) -> some View where Mask: View {
        self.mask(mask
            .foregroundColor(.black)
            .background(Color.white)
            .compositingGroup()
            .luminanceToAlpha()
        )
    }
}

struct DebossTest: View {
    static var lightPurple = UIColor(red: 212/255, green: 206/255, blue: 247/255, alpha: 1)
    
    var body: some View {
        ZStack {
            Color(uiColor: DebossTest.lightPurple)
            MyButton()
                .font(.system(size: 144))
        }
    }
}


struct MyButton: View {
    
    static var darkPurple = UIColor(red: 140/255, green: 134/255, blue: 211/255, alpha: 1)
    let trashName = "trash.fill"
    
    var body: some View {
        ZStack {
            
            // the darker inset image
            Image(systemName: trashName)
                .foregroundColor(Color(uiColor: MyButton.darkPurple))
            
            // black inner shadow
            Rectangle()
                .inverseMask(Image(systemName: trashName))
                .shadow(color: Color.black, radius: 1, x: 0, y: 1)
                .mask(Image(systemName: trashName))
                .clipped()
            
            // white bottom edges
            Image(systemName: trashName)
                .shadow(color: Color.white, radius: 1, x: 0, y: 1)
                .inverseMask(Image(systemName: trashName))
        }
        .frame(width: 185, height: 140)
    }
}

struct DebossTest_Previews: PreviewProvider {
    static var previews: some View {
        DebossTest()
    }
}

Answer 2

malhal的答案很完美，但我的做法与他的做法不同。我的代码可以通过图像更新剪辑视图，通常我们可以使用形状来完成，但这是另一天的事，这是我的方式：

struct ContentView: View {
    var body: some View {
        
        Color.yellow
            .overlay(
                
                Circle()
                    .fill(Color.black)
                    .frame(width: 100, height: 100)
                    .opacity(0.1)
                    .overlay(
                        
                        ZStack {
                            
                            Circle()
                                .stroke(Color.black, lineWidth: 3)
                                .blur(radius: 5)
                            
                            ZStack {
                                
                                Image(systemName: "info")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(Color.black)
                                    .blur(radius: 5)
                                    .opacity(0.5)
                                
                                Image(systemName: "info")
                                    .resizable()
                                    .scaledToFit()
                                    .foregroundColor(Color.yellow)
                                
                            }
                            .padding()
                            
                        }
                        
                    )
                    .clipShape(Circle())
                
            )
        
    }
}

Answer 3

您可以通过将 .inner 阴影修改器直接应用于前景样式来实现此效果。

示例：

Image(systemName: "heart.fill")
  .font(.system(size: 64, weight: .semibold))
  .foregroundStyle(
    .white
    .shadow(
      .inner(color: .black, radius: 3)
    )
  )