如何减小SF Symbol的边框宽度？SwiftUI复选框样式调整

SF Symbol里的rectangle和rectangle.inset.filled图标样式是固定的，没法直接调整边框宽度。想要实现细边框的Checkbox，不如自己绘制形状，这样能完全控制边框粗细。

直接上可运行的代码：

struct CheckboxView: View {
    var isSelected: Bool
    var size: CGSize = CGSize(width: 30, height: 30)
    // 自定义边框宽度，按需调整
    var borderWidth: CGFloat = 1.5
    
    var body: some View {
        ZStack {
            // 绘制基础边框
            RoundedRectangle(cornerRadius: 3) // 圆角大小可根据设计需求修改
                .stroke(lineWidth: borderWidth)
                .foregroundColor(.primary)
            
            // 选中状态的填充效果
            if isSelected {
                RoundedRectangle(cornerRadius: 3)
                    .fill(Color.primary)
                    // 通过padding模拟原图标内缩效果，数值可随边框宽度微调
                    .padding(borderWidth + 1)
            }
        }
        .frame(width: size.width, height: size.height)
    }
}

struct CheckboxView_Previews: PreviewProvider {
    static var previews: some View {
        VStack(spacing: 20) {
            CheckboxView(isSelected: false)
            CheckboxView(isSelected: true)
            // 演示更细的边框效果
            CheckboxView(isSelected: false, borderWidth: 1)
            CheckboxView(isSelected: true, borderWidth: 1)
        }
    }
}

关键说明： #

• 边框粗细完全由borderWidth参数控制，想设置多细都可以
• 圆角大小通过cornerRadius调整，能匹配不同设计风格
• 选中状态的填充用padding实现内缩，完美还原原SF Symbol的嵌入效果
• 颜色可替换成你的主题色，比如把.primary改成自定义的Color.accentColor

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