SwiftUI ToolbarItem显示照片位置不对应的问题

问题描述

在SwiftUI中，我发现当ToolbarItem显示图片时，就会存在位置摆放不对应的问题。

struct HomeView: View {
    var body: some View {
        NavigationView {
            VStack {
                // 省略代码
            }
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Button(action: { }, label: {
                        Image(color == .light ? "icon3" : "icon2")
                            .resizable()
                            .scaledToFit()
                    })
                }
                ToolbarItem(placement: .topBarTrailing) {
                    Button(action: { }, label: {
                        Image(systemName:"gearshape.fill")
                            .resizable()
                            .scaledToFit()
                            .foregroundColor(color == .light ? .black : .white)
                    })
                }
            }
        }
    }
}

在这段代码中，我尝试将左侧的Toolbar显示为应用的图标。

但实际的显示位置与 .topBarLeading 的位置并不对应。

当我将Image改为SF符号时，.topBarLeading 则显示在对应的位置上。

ToolbarItem(placement: .topBarLeading) {
    Button(action: { }, label: {
        Image(systemName:"gearshape.fill")
            .resizable()
            .scaledToFit()
            .foregroundColor(color == .light ? .black : .white)
    })
}

问题原因

经过查询了解到，Image(systemName:) 是 SF Symbols，遵循标准 Toolbar 布局。

SF Symbols（systemName）是 Apple 内置的矢量图标，SwiftUI 知道它们应该如何在不同的 ToolbarItem 位置进行布局。

ToolbarItem(placement: .topBarLeading) 在使用 SF Symbols 时，SwiftUI 能正确识别并放置在导航栏的左侧。

Image(“your_image_name”) 被视为普通 View，而不是 SF Symbols。

ToolbarItem的图片（Image(“icon3”) 或 Image(“icon2”)）被 SwiftUI 视为普通的 View，它不像 SF Symbols 那样自动适配 Toolbar 布局。

ToolbarItem 期望的是“小而标准”的图标，而自定义图片的尺寸、比例等可能导致它无法正确对齐到左侧。

SwiftUI 可能会把这个 Image 视为“较大的自定义视图”，从而错误地将其对齐到 NavigationTitle 旁边，而不是严格地放在左上角。

解决方案

ToolbarItem(placement: .topBarLeading) {
    Button(action: { }, label: {
        Image(color == .light ? "icon3" : "icon2")
            .resizable()
            .scaledToFit()
            .frame(width: 24, height: 24) // 控制图片尺寸
    })
}

这样可以让 SwiftUI 识别它类似 SF Symbols 的大小，更容易正确对齐。

总结

SF Symbols (Image(systemName:)) 在 ToolbarItem 中会自动正确对齐。

如果需要在ToolbarItem中显示图片或其他资源，需要使用frame控制尺寸，才能显示在对应的位置。