macOS 14.5中SwiftUI Checkbox聚焦环过大偏移，是否为Bug？

问题说明 #

在macOS 14.5系统中，使用SwiftUI默认的.toggleStyle(.checkbox)时，Checkbox获得焦点后的聚焦环会出现尺寸过大且偏移的异常表现，该问题仅针对macOS平台，与iOS无关。

可复现代码 #

import SwiftUI

@main
struct CheckboxFocusRingBugApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .windowResizability(.contentSize)
    }
}

struct ContentView: View {
    @State var text1: String = ""
    @State var isOn1: Bool = true

    let promptText: String = "" 

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack(alignment: .top) {
                TextField(promptText, text: $text1)
                    .frame(width: 100)
                Toggle("", isOn: $isOn1)
                    .toggleStyle(.checkbox)
            }
        }
        .padding(16)
    }
}

#Preview {
    ContentView()
}

问题性质 #

这是macOS 14.5版本中SwiftUI框架的明确Bug，暂未在其他macOS版本中发现该问题。

临时修复方案 #

可以通过自定义ToggleStyle替代系统默认样式，手动绘制符合规范的聚焦环：

struct FixedCheckboxToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle()
        }) {
            HStack(alignment: .center, spacing: 4) {
                Image(systemName: configuration.isOn ? "checkmark.square.fill" : "square")
                    .foregroundColor(configuration.isOn ? .accentColor : .primary)
                configuration.label
            }
        }
        .buttonStyle(.plain)
        .focusEffect(.disabled) // 禁用系统默认异常聚焦环
        .overlay {
            if configuration.isFocused {
                RoundedRectangle(cornerRadius: 4)
                    .stroke(Color.accentColor, lineWidth: 2)
                    .padding(-2) // 调整内边距匹配原生聚焦环尺寸
            }
        }
    }
}

// 使用示例
Toggle("", isOn: $isOn1)
    .toggleStyle(FixedCheckboxToggleStyle())

该方案通过自定义按钮实现Checkbox逻辑，同时手动绘制聚焦环，确保尺寸和位置符合原生控件的预期表现。

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