NavigationView内带图片的Button缩放异常问题

嘿，这个问题我之前也踩过坑！核心原因很简单：你那张大尺寸的自定义PNG图片开启resizable()后，没有设置固定的尺寸约束，所以它会尽可能撑满所有可用空间，自然就占了整个屏幕。而系统自带的导航栏图标本身就有默认的尺寸限制，所以不会出现这个问题。

只需要给图片添加一个frame修饰符，指定导航栏图标常用的尺寸（比如24x24，你可以根据需求调整）就能搞定：

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)
                    .frame(width: 24, height: 24) // 关键：添加固定尺寸约束
            })
            .navigationViewStyle(StackNavigationViewStyle())
    }
}

另外提个小细节：你之前写的.scaledToFit()和.aspectRatio(contentMode: .fit)作用完全重复，保留其中一个就够啦，上面的代码我留了.aspectRatio(contentMode: .fit)，换成.scaledToFit()效果也一样。

如果想要图标和导航栏上下的间距更舒服，还能额外加个.padding(.vertical, 4)之类的修饰符，这个就看你自己的视觉需求调整咯。

内容的提问来源于stack exchange，提问作者DevB2F