🌅 SystemImage

SwiftUI 1.0 中的 SF Symbols， 它們的 frame 沒有辦法包含整個圖形，這似乎是一個 bug，所以我們自己寫了這個 SystemImage 來修復這個問題。

SF Symbols 的 frame 沒有包住整個圖形 🐞

這似乎是 SwiftUI 1.0 (Xcode 11) 的 🐞，但在 SwiftUI 2.0 (Xcode 12) 據說修復了。 👉 Why the frame of an SF Symbol isn't encompassing its entire image? - StackOverflow

Workaround

黃：修正前、紫：修正後

🌅 SystemImage

/*
 Why the frame of an SF Symbol isn't encompassing its entire image?
 https://stackoverflow.com/a/63942841/5409815
 
 This appears to be a bug that is now fixed in SwiftUI 2.0 (Xcode 12).
 
 Here is a workaround for SwiftUI 1.0 (Xcode 11). 
 It uses UIImage(systemName:) to get the actual dimensions of the image, 
 and then uses .aspectRatio(_:contentMode:) to set the correct aspect ratio.
 */

import SwiftUI

/// # 🌅 SystemImage
/// SystemImage("heart.fill")
public struct SystemImage: View {
    
    // SF Symbol name
    let name: String
    
    // public init
    public init(_ name: String) {
        self.name = name
    }
    
    // view body
    public var body: some View {
        // ⭐️ use UIImage to get the actual size
        let size = UIImage(systemName: name)!.size
        return Image(systemName: name)
            .resizable()
            // set the correct aspect ratio for Image(systemName:)
            .aspectRatio(size, contentMode: .fit)
    }
}

💈 範例

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        HStack {
                Group {
                    // SwiftUI 1.0 bug: wrong frame
                    Image(systemName: "envelope.badge.fill")
                    Image(systemName: "moon.stars.fill")
                } // Group
                    .foregroundColor(.yellow)
                    .font(.system(size: 100))
                    .border(Color.red)
            
                Group {
                    // ⭐️ workaround
                    SystemImage("envelope.badge.fill")
                    SystemImage("moon.stars.fill")
                } // Group
                    .foregroundColor(.purple)
                    .frame(width: 100)
                    .border(Color.red)
                    .shadow(
                        color: Color.black.opacity(0.6), 
                        radius: 3, x: 3, y: 3            )
            
        } // container (HStack)
            .padding(40)
            .background(Color.white)
    }
}

PlaygroundPage.current.setLiveView(ContentView())

💬 討論

• https://stackoverflow.com/a/63942841/5409815

參考資料

• Human Interface Guidelines ⟩ SF Symbols
• SF Symbols app