SwiftUI Label中能否使用动态图片？附Menu场景代码示例

当然可以！SwiftUI的Label完全支持动态生成的图片——不管你的自定义方法返回的是UIKit的UIImage还是SwiftUI原生的Image，都能无缝集成到你的Menu场景里。下面是具体的实现步骤和代码示例：

1. 实现自定义图片生成函数 #

首先，先写好根据文本生成图片的方法。这里举个简单的示例，生成带文本的圆形图标：

// 生成UIImage的版本
func generateFuelImage(from text: String) -> UIImage {
    let iconSize = CGSize(width: 24, height: 24) // 适配Label默认图标尺寸
    UIGraphicsBeginImageContextWithOptions(iconSize, false, UIScreen.main.scale)
    
    // 绘制圆形背景
    let circlePath = UIBezierPath(ovalIn: CGRect(origin: .zero, size: iconSize))
    UIColor.systemBlue.setFill()
    circlePath.fill()
    
    // 绘制文本
    let textAttributes: [NSAttributedString.Key: Any] = [
        .font: UIFont.boldSystemFont(ofSize: 10),
        .foregroundColor: UIColor.white
    ]
    let textSize = text.size(withAttributes: textAttributes)
    let textRect = CGRect(
        x: (iconSize.width - textSize.width)/2,
        y: (iconSize.height - textSize.height)/2,
        width: textSize.width,
        height: textSize.height
    )
    text.draw(in: textRect, withAttributes: textAttributes)
    
    let finalImage = UIGraphicsGetImageFromCurrentImageContext() ?? UIImage(systemName: "fuelpump.circle")!
    UIGraphicsEndImageContext()
    
    return finalImage
}

// 可选：转成SwiftUI Image的版本，直接返回Image类型
func generateSwiftUIFuelImage(from text: String) -> Image {
    return Image(uiImage: generateFuelImage(from: text))
}

2. 在Menu场景中集成动态图片 #

接下来修改你提供的Menu代码，把原来的systemImage替换成动态生成的图片即可。这里有两种写法，根据你的函数返回类型选择：

Menu {
    if fuelTypeisAvailable(fuelType: "Diesel") {
        Button {
            updateStuff()
            Haptics.shared.play(.light)
            preferredFuelType = "Diesel"
        } label: {
            // 写法1：如果函数返回UIImage，转成SwiftUI Image传入
            Label("Diesel", image: Image(uiImage: generateFuelImage(from: "Diesel")))
            
            // 写法2：如果用返回SwiftUI Image的函数，直接传入
            // Label("Diesel", image: generateSwiftUIFuelImage(from: "Diesel"))
        }
    }
    
    // 对应你提问里的SP98需求示例
    if fuelTypeisAvailable(fuelType: "SP98") {
        Button {
            updateStuff()
            Haptics.shared.play(.light)
            preferredFuelType = "SP98"
        } label: {
            Label("SP98", image: Image(uiImage: generateFuelImage(from: "SP98")))
        }
    }
} label: {
    Label("Preferred Fuel Type", systemImage: "fuelpump")
}

3. 优化体验的小提示 #

• 尺寸适配：Label的图标默认是小尺寸（24pt左右），生成图片时尽量匹配这个大小，避免出现拉伸或模糊的情况。
• 缓存优化：如果生成图片的逻辑比较复杂（比如涉及复杂绘制），建议给生成的图片加个缓存，避免重复计算：

private var fuelImageCache: [String: UIImage] = [:]

func generateFuelImage(from text: String) -> UIImage {
    // 先查缓存，有就直接返回
    if let cachedImage = fuelImageCache[text] {
        return cachedImage
    }
    
    // 原来的图片生成逻辑...
    
    // 存入缓存
    fuelImageCache[text] = finalImage
    return finalImage
}

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