SwiftUI 中如何设置 SF Symbol 的尺寸

没故事的卓同学2023-08-02 17:07

iOS 中自带的 SF Symbol 数量已经超过了 5000 个，一些常见的符号在日常开发中还是相当好用的。使用SF Symbol 一定会遇到设置尺寸的问题。本文将介绍三种常见设置 SF symbol 大小的方法。

设置 font

因为SF symbol 作为矢量图标，实现上和字体一致。因此可以通过设置字体的方式来设置大小。通过字体的 size 和 weight 来调整图标的大小和粗细。

swift 复制代码

HStack {
    Image(systemName: "checkmark")
        .font(.system(size: 30, weight: .regular))
    Image(systemName: "checkmark")
        .font(.system(size: 25, weight: .regular))
    Image(systemName: "checkmark")
        .font(.system(size: 25, weight: .medium))
    Image(systemName: "checkmark")
        .font(.system(size: 25, weight: .bold))
}

设置 frame

因为 SF symbol 通过 Image 来显示，因此也可以通过控制图像的思路来调整大小：标记为 resizeable 通过设置 frame 让图案来填满容器。

swift 复制代码

HStack {
    Image(systemName: "checkmark")
        .frame(width: 20, height: 20)
    
    Image(systemName: "checkmark")
        .resizable()
        .scaledToFit()
        .frame(width: 20, height: 20)
    
    Image(systemName: "checkmark")
        .resizable()
        .scaledToFit()
        .frame(width: 25, height: 25)
    
    Image(systemName: "checkmark")
        .resizable()
        .scaledToFit()
        .frame(width: 30, height: 30)
}

特别要提醒的是记得要先将 Image 标记为 **resizable。**否则虽然容器变大了，但是容器的内容图标不会变大。这是 Image 控件的通用特性。

上图中虽然 frame 都是 40 x 40，但是第一个因为没有标记为 **resizable，**因此只是容器尺寸变大，内容大小不会跟随 frame 变化。

swift 复制代码

HStack {
    Image(systemName: "checkmark")
        .frame(width: 40, height: 40)
        .background {
            RoundedRectangle(cornerRadius: 2)
                .fill(AppColor.gray0)
        }
        
    Image(systemName: "checkmark")
        .resizable()
        .scaledToFit()
        .frame(width: 40, height: 40)
        .background {
            RoundedRectangle(cornerRadius: 2)
                .fill(AppColor.gray0)
        }
}

设置 scale

Image 控件还有很便捷的 func imageScale(_ scale: Image.Scale) ，如果只是简单的按照原始标准大小进行微调，可以使用这个方法。但是 scale 只有 small、medium、large 三档：

swift 复制代码

HStack {
    Image(systemName: "heart.fill")
        .imageScale(.small)
    Image(systemName: "heart.fill")
        .imageScale(.medium)
    Image(systemName: "heart.fill")
        .imageScale(.large)
}

史上最全的SF Symbols 使用指南

How do I set the size of a SF Symbol in SwiftUI