swiftui - 在 SwiftUI 中将 SF Symbols 调整为相同大小看起来不正确

Question

我正在我的应用程序中显示一行各种 SF 符号，并希望将它们调整为按钮。然而，由于 SF Symbols 开始时大小不同，当我将它们全部调整为 44x44 时，有些符号看起来太大了。我可以根据它们是什么来调整它们的大小，但是我实际上并不知道这些符号会提前出现什么，只是它们会被类似地分组，即。一堆形状，一堆箭头等

有没有人对如何正确调整它们的大小有什么建议，而其中一些看起来不会太大。例如，图中中间箭头下方的 对我来说太大了。

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.black
            VStack {
                HStack {
                    Image(systemName: "arrow.left")
                        .font(.title)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                    
                    Image(systemName: "arrow.up.right")
                        .font(.title)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))

                    Image(systemName: "arrow.down")
                        .font(.title)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                }
                
                HStack {
                    Image(systemName: "arrow.left")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 44.0, height: 44.0)
                        .font(.headline)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                    
                    Image(systemName: "arrow.up.right")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 44.0, height: 44.0)
                        .font(.headline)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))

                    Image(systemName: "arrow.down")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 44.0, height: 44.0)
                        .font(.headline)
                        .foregroundColor(.white)
                        .border(Color.white.opacity(0.3))
                }
            }
            .padding()
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

Answer 1

当使用 fill 内容模式时，它们看起来是一样的，所以这可能是合适的(只需将帧大小调整为所需的大小)。

使用 Xcode 12/iOS 14 测试。

HStack {
    Image(systemName: "arrow.left")
        .resizable()
        .aspectRatio(contentMode: .fill)      // << here !!
        .frame(width: 44.0, height: 44.0)
        .font(.headline)
        .foregroundColor(.white)
        .border(Color.white.opacity(0.3))

    Image(systemName: "arrow.up.right")
        .resizable()
        .aspectRatio(contentMode: .fill)      // << here !!
        .frame(width: 44.0, height: 44.0)
        .font(.headline)
        .foregroundColor(.white)
        .border(Color.white.opacity(0.3))

    Image(systemName: "arrow.down")
        .resizable()
        .aspectRatio(contentMode: .fill)      // << here !!
        .frame(width: 44.0, height: 44.0)
        .font(.headline)
        .foregroundColor(.white)
        .border(Color.white.opacity(0.3))
}