NavigationView 内带有图像的按钮缩放不正确

Question

当我用作系统图像时，一切正常，但我有一个大小为 512x512 的 png 图像，我想让它适合导航栏项目。图片几乎占据了整个屏幕，代码如下：

var body: some View {

    NavigationView {
        Text("Main")            
            .navigationBarTitle("Title", displayMode: .inline)
            .navigationBarItems(leading:
                Button(action: {
                    print("button pressed")

                })
                {
                    Image("menu")
                        .renderingMode(.template)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .scaledToFit()
                }
        )
            .navigationViewStyle(StackNavigationViewStyle())
    }

}

Answer 1

GeometryReader给你家长指定的区域。我发现指定的 space 很小，但如果将它翻三倍，它就很合适。

import SwiftUI

struct NavItemImage: View {
    var body: some View {

        NavigationView {
            Text("Main")
                .navigationBarTitle(Text("Title").font(.largeTitle), displayMode: .inline)
                .navigationBarItems(leading:
                    GeometryReader{geo in
                        Button(action: {
                            print("button pressed")
                        })
                        {
                            Image("menu")
                                .renderingMode(.original)
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .scaledToFit()
                                .frame(width: geo.size.width * 3, height: geo.size.height * 3, alignment: .leading)
                        }
                    }
            )
                .navigationViewStyle(StackNavigationViewStyle())
        }

    }
}

NavigationView 内带有图像的按钮缩放不正确

Button with Image inside NavigationView scales incorrectly

swift

swiftui

navigationbar

swift5

navigationview