如何在公共图标类中一起管理自定义导入图标和 sf 符号的大小调整？

Posted 2023-02-24

【中文标题】如何在公共图标类中一起管理自定义导入图标和 sf 符号的大小调整？

【英文标题】：How to manage the resizing of a custom imported icon and sf symbol together in a common icon class?

【发布时间】：2020-04-23 11:54:45

【问题描述】：

我正在创建一个库图标类，它接收图标名称、标志“isSF”（此标志将说明图标是否为 SF 符号）和图标的大小。我需要根据收到的大小值调整两个图标的大小。我在这里面临的问题是，对于 SF Symbols，我们可以使用 .font(.system(size : value)) 修饰符调整它的大小，但如何调整图像（自定义图标）的大小。

请帮助我。提前致谢

struct XIcon: View 
    var iconName: String
    var isSF: Bool? = true
    var size: CGFloat
    var body: some View 
        if isSF! 
            return AnyView( Image(systemName: "\(iconName)")
                .font(.system(size: size)))
         else 
            return AnyView( Image(uiImage: UIImage(named: "\(iconName)")!).resizable())
        
    

再一次，我知道当我们指定大小时，会执行矢量对齐，但对于 frame()，情况并非如此。对于图像缩放，有 scaleEffect() 但我不知道如何缩放图像，使其与为 SF Symbol 指定的大小等效

【参考方案1】：

这是可能的解决方案。使用 Xcode 11.4 / ios 13.4 测试

注意：边框是为了更好地显示尺寸

struct XIcon: View 
    var iconName: String
    var isSF: Bool? = true
    var size: CGFloat

    var body: some View 
        var image: Image
        if isSF! 
            image = Image(systemName: "\(iconName)")
         else 
            image = Image(uiImage: UIImage(named: "\(iconName)")!)
        
        return image.resizable()
            .frame(width: size, height: size).aspectRatio(contentMode: .fill)
    


struct TestXIcon: View 
    var body: some View 
        VStack 
            XIcon(iconName: "tv", size: 100)
                .border(Color.red)
            XIcon(iconName: "icon", isSF: false, size: 100)
                .border(Color.red)
        
    

【讨论】：

增加尺寸的方式不是矢量放大..所以形状可能会变形。您可以尝试使用 battery.25 图标。使用 .font(.system(size: value)) 调整大小将为我们提供适当的放大图标（使用矢量放大完成），但您给出的解决方案可能会扭曲形状。在battery.25中使用这两种方法检查放大，你可以找到我的意思的确切变化。谢谢@Asperi

@prebeesh。 .font(.system(size: value))，即。字体大小，与 Image 调整大小无关，根本与 调整大小 无关。不用争论，这是你的方式，以防万一。

哦.. 那么有没有什么方法可以在不变形的情况下调整图标的大小？就像字体大小一样？因为当我们构图时，像电池这样的图标会变形。你有什么办法可以解决吗？ @Asperi