如何在SwiftUI Picker中遍历Font.Design枚举值实现字体样式选择

解决方案 #

核心原因是系统内置的Font.Design未默认遵守CaseIterable协议，无法直接被ForEach遍历，我们手动扩展遵守协议即可实现需求：

步骤1：扩展Font.Design添加协议支持 #

import SwiftUI

extension Font.Design: CaseIterable {
    // 手动返回所有枚举值，当前系统仅提供4种
    public static var allCases: [Font.Design] {
        [.default, .monospaced, .rounded, .serif]
    }
    
    // 可选：自定义显示名称，避免关键字`default`显示异常
    var displayName: String {
        switch self {
        case .default: return "默认"
        case .monospaced: return "等宽"
        case .rounded: return "圆角"
        case .serif: return "衬线"
        }
    }
}

步骤2：修改Picker实现代码 #

把ForEach的参数改为Font.Design.allCases，文本内容使用自定义的displayName即可：

Picker("字体设计", selection: $vm.fontDesign) {
    ForEach(Font.Design.allCases, id: \.self) { design in
        Text(design.displayName)
            .tag(design)
    }
}

效果验证 #

选择后可通过如下代码测试字体样式是否生效：

Text("测试字体效果")
    .font(.system(size: 18, design: vm.fontDesign))

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