如何在SwiftUI工具栏菜单中正确设置图标尺寸？

工具栏中图标显示正常 #

在工具栏中使用MyImage组件显示图标时，尺寸完全符合预期：

对应代码：

MyImage( "square.CornerToCorner")

菜单内图标尺寸异常 #

将按钮嵌套进Menu组件后，图标出现异常放大的情况：

对应代码：

Menu( content:{
    Button( action:{ }) {
        MyImage( "cornerToCorner" )
            .frame( width: 18, height: 18 )
    }
}, label:{
    MyImage( "cornerToCorner" )
        .frame( width: 18, height: 18 )
})

MyImage组件实现 #

MyImage组件逻辑简单，仅返回可缩放图片并设置固定尺寸，在工具栏、侧边栏等其他场景下显示均正常，仅在菜单中出现问题：

return Image( name )
    .resizable()
    .frame( width: 18, height: 18 )

额外观察现象 #

• 64x64和32x32规格的图片在菜单中会以原始尺寸显示
• 相同尺寸的图标放在一起显示正常，混合不同尺寸图标时，所有图标会统一以最大尺寸显示

可复现代码 #

以下完整代码可复现该问题，目标图标在其他场景均显示正常：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            ToolbarView( )
            Text("Hey!!")
        }
        .padding()
    }
}

struct ToolbarView: View {
    var body: some View {
        VStack { }
            .toolbar{
                ToolbarItemGroup(placement: .principal) {
                    Menu( content:{ // TODO:  large graphics.
                        Button( action:{ }) {
                            MyImage( name: "square.CornerToCorner" )
                                .frame( width: 18, height: 18 )
                        }
                    }, label:{ MyImage( name: "square.CornerToCorner" )})   //.frame(width: 20, height: 20)})
                }
            }
    }
}

struct MyImage: View {
    let name: String

    var body: some View {
//      if ( NSImage(named: name) != nil ) {
            return Image( name )
                .resizable()
                .frame( width: 18, height: 18 )
//      }
    }
}

原始SVG代码 #

<?xml version="1.0" encoding="utf-8"?><svg viewBox="0 0 108 108" width="100%" height="100%" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><defs /><rect x="36" y="36" width="90" height="90" fill="none" stroke="#000000" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="4,4" transform="matrix(1.002457 0 0 1.002457 -34.71007 -34.71007)" /><rect x="117" y="117" width="18" height="18" fill="#000000" fill-opacity="1" transform="matrix(1.002457 0 0 1.002457 -34.71007 -34.71007)" /><rect x="117" y="117" width="18" height="18" fill="none" stroke="#000000" stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="none" transform="matrix(1.002457 0 0 1.002457 -34.71007 -34.71007)" /><line x1="36" y1="36" x2="126" y2="126" stroke="#000000" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="4,4" transform="matrix(1.002457 0 0 1.002457 -34.71007 -34.71007)" /></svg>

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