如何自定义菜单项中的按钮图像？

Question

我正在开发 macOS 应用程序，我需要使用菜单。

我可以自定义菜单项按钮文本的字体大小和颜色，但我不知道如何与按钮中的图像产生差异。

这是一些示例代码：

Button(action: { print("Something") }) {
    HStack {
        Image(systemName: "questionmark.circle")
            .resizable()
            .frame(width: 24, height: 24)
            .foregroundColor(.blue)
        Text("Something")
            .font(.system(size: 24))
    }
}
Menu("☰") {
    Button(action: { print("Something") }) {
        HStack {
            Image(systemName: "questionmark.circle")
                .resizable()
                .frame(width: 24, height: 24)
                .foregroundColor(.blue)
            Text("Something")
                .font(.system(size: 24))
        }
    }
    Button(action: { print("Something Else") }) {
        HStack {
            Image(systemName: "exclamationmark.circle")
            Text("Something Else")
                .font(.system(size: 32))
        }
    }
}
.menuStyle(.button)
.buttonStyle(.plain)

我在菜单之前添加了一个样式按钮，以说明我可以对按钮进行更改，但这些更改不适用于菜单内的按钮：

如何更改菜单项中的按钮图像？

Answer 1

解决问题的一种方法是使用您选择的大小从符号创建图像。 如何将图标放入工具栏菜单并使其大小正确的答案可以为此进行调整（这是我的答案）：

struct ResizedSymbol: View {
    let systemName: String
    var targetSize: CGFloat = 20

    var body: some View {
        let size = CGSize(width: targetSize, height: targetSize)
        let image = Image(systemName: systemName)
        return Image(size: size) { ctx in
            let resolvedImage = ctx.resolve(image)
            let imageSize = resolvedImage.size
            let maxDimension = min(imageSize.width, imageSize.height)
            let w = targetSize * imageSize.width / max(1, maxDimension)
            let h = targetSize * imageSize.height / max(1, maxDimension)
            let x = (targetSize - w) / 2
            let y = (targetSize - h) / 2
            ctx.draw(resolvedImage, in: CGRect(x: x, y: y, width: w, height: h))
        }
    }
}

HStack {
    ResizedSymbol(systemName: "questionmark.circle", targetSize: 24)
        .foregroundColor(.blue)
    Text("Something")
        .font(.system(size: 24))
}

HStack {
    ResizedSymbol(systemName: "exclamationmark.circle", targetSize: 32)
    Text("Something Else")
        .font(.system(size: 32))
}