SwiftUI 中如何设置 SF Symbol 的尺寸

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

设置 font

由于SF symbol 作为矢量图标，完成上和字体共同。因而能够经过设置字体的方法来设置巨细。经过字体的 size 和 weight 来调整图标的巨细和粗细。

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 让图画来填满容器。

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 变化。

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 三档：

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