如何在SF符號上應用內陰影，使其看起來如圖所示？

我一直試圖在 SwiftUI 中獲得這種凹陷效果，但沒有任何效果。我嘗試了 shadow(color:radius:x:y:) 修飾符，但它在符號外部應用了陰影。您能否告訴我是否有任何其他 API 或技巧可以實作這一目標？謝謝你 ！

uj5u.com熱心網友回復：

喜歡凹陷的效果，讓我想起了 iOS 6。關鍵是

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

uj5u.com熱心網友回復：

這個包你可能會感興趣：

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

標籤：IOS 迅速 苹果手机 迅捷 uikit

上一篇：SwiftUI：添加核心資料項時更新選項卡欄徽章

下一篇：strsplit多個分隔符r