SwiftUI 1.0 中的 SF Symbols， 它們的 frame 沒有辦法包含整個圖形，這似乎是一個 bug，所以我們自己寫了這個 SystemImage 來修復這個問題。
這似乎是 SwiftUI 1.0 (Xcode 11) 的 🐞，但在 SwiftUI 2.0 (Xcode 12) 據說修復了。 👉 Why the frame of an SF Symbol isn't encompassing its entire image? - StackOverflow
Human Interface Guidelines ⟩ SF Symbols
Last updated
Was this helpful?
Was this helpful?
/*
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())