SwiftUI如何统一SF Symbols显示尺寸且保留动态类型支持

问题复现 #

SF Symbols 不同符号的固有渲染尺寸、内置留白存在设计层面的差异，直接在列表中排布会出现元素错位问题，硬编码固定宽高的实现方式会破坏动态类型适配能力。

问题复现代码：

struct LayoutTest: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack(alignment: .top) {
                Image(systemName: "figure.walk").background(Color.red)
                Text("Value 1").background(Color.red)
            }
            HStack(alignment: .top) {
                Image(systemName: "phone").background(Color.red)
                Text("Value 2").background(Color.red)
            }
            HStack(alignment: .top) {
                Image(systemName: "figure.step.training").background(Color.red)
                Text("Value 3").background(Color.red)
            }
        }.font(.title)
    }
}

可行方案 #

方案1：动态相对宽度约束（最推荐） #

使用SwiftUI原生@ScaledMetric属性包装器，定义和目标文本样式绑定的图标宽度，宽度值会随系统动态类型设置自动等比缩放，完全保留动态类型特性。给所有图标设置统一的宽度约束并居中排布，即可消除尺寸差异带来的错位：

struct LayoutTest: View {
    // 绑定.title文本样式，宽度随字体大小自动缩放
    @ScaledMetric(relativeTo: .title) private var uniformIconWidth = UIFont.preferredFont(forTextStyle: .title).lineHeight
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack(alignment: .center) {
                Image(systemName: "figure.walk")
                    .frame(width: uniformIconWidth, alignment: .center)
                    .background(Color.red)
                Text("Value 1").background(Color.red)
            }
            HStack(alignment: .center) {
                Image(systemName: "phone")
                    .frame(width: uniformIconWidth, alignment: .center)
                    .background(Color.red)
                Text("Value 2").background(Color.red)
            }
            HStack(alignment: .center) {
                Image(systemName: "figure.step.training")
                    .frame(width: uniformIconWidth, alignment: .center)
                    .background(Color.red)
                Text("Value 3").background(Color.red)
            }
        }
        .font(.title)
    }
}

方案优势：

• 动态类型适配完整，字体缩放时图标尺寸同步等比调整，不会出现文字、图标尺寸脱节
• 对现有代码侵入性极低，仅需给图标节点添加一行布局修饰符
• 对齐精度高，所有图标在统一宽度容器内居中，视觉规整度最好

方案2：使用原生Label组件（适配成本最低） #

SwiftUI的Label组件原生为SF Symbols+文本的组合做了排版优化，自动处理图标与文本的基线对齐、间距适配，天然支持动态类型，不需要手动计算布局尺寸：

struct LayoutTest: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Label("Value 1", systemImage: "figure.walk").background(Color.red)
            Label("Value 2", systemImage: "phone").background(Color.red)
            Label("Value 3", systemImage: "figure.step.training").background(Color.red)
        }
        .font(.title)
        .labelStyle(.titleAndIcon)
    }
}

如果需要自定义图标和文本的间距、对齐规则，可以通过自定义LabelStyle实现，所有布局计算会自动跟随动态类型调整。 #

方案3：SF Symbols 原生尺寸修饰符（iOS 16+适用） #

iOS 16及以上系统提供了SF Symbols专属排版修饰符，可以统一所有符号的排版尺寸基准，缩小不同符号的尺寸差异：

Image(systemName: "figure.walk")
    .symbolSizing(.font) // 强制符号尺寸匹配当前字体的em方块基准
    .imageScale(.medium) // 统一符号缩放等级

注意事项 #

• 禁止使用硬编码的固定width/height值，否则开启大字体动态类型时，图标不会随文字同步缩放，会出现更严重的排版错位
• HStack对齐规则优先选择.center或.firstTextBaseline，不要使用.top，避免不同符号的顶部内置留白带来的视觉错位
• 若需要更精细的视觉对齐，可以给图标添加水平方向的微小padding微调，微调值建议也通过@ScaledMetric绑定，不要使用固定大值。

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