You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI如何实现iOS设置App同款图标且保留SF Symbols动态字号适配能力

系统设置App的图标示例

要实现上述iOS系统设置App的图标效果,同时保留SF Symbols对系统动态类型字号的适配能力,可使用以下两种方案:

方案1:使用@ScaledMetric定义动态容器尺寸(最推荐)

@ScaledMetric修饰的数值会跟随用户系统偏好的字号动态缩放,不会硬编码固定尺寸,既保证所有图标容器等大,又完美适配动态类型:

// 定义随动态类型自动缩放的容器参数,基准值可根据需求调整
@ScaledMetric private var iconContainerSize: CGFloat = 28
@ScaledMetric private var iconCornerRadius: CGFloat = 6

// 图标实现代码
Image(systemName: "person.fill")
    .foregroundColor(.white)
    .font(.subheadline.weight(.semibold))
    .frame(width: iconContainerSize, height: iconContainerSize)
    .background(.blue)
    .cornerRadius(iconCornerRadius)

iOS系统设置App本身的图标逻辑也和该方案一致,容器尺寸、圆角都会跟随用户的字体大小偏好同步调整。

方案2:无自定义变量的轻量实现

如果不想额外定义缩放变量,可以通过padding加正方形约束的方式实现,所有图标会自动统一尺寸:

Image(systemName: "person.fill")
    .foregroundColor(.white)
    .font(.subheadline.weight(.semibold))
    .padding(6)
    .background(.blue, in: RoundedRectangle(cornerRadius: 6))
    .aspectRatio(1, contentMode: .fit)

内容的提问来源于stack exchange,提问作者Boothosh81

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 22:24:00