如何移除macOS 13.0中带.focusable()的View的FocusRing

针对你在macOS 13.0中使用.focusable()修饰自定义View时出现的蓝色焦点环问题，有几种简单的解决方式：

方法一：直接禁用焦点效果 #

在.focusable()修饰符后添加.focusEffect(.disabled)，可以直接关闭焦点环显示，这是最直接的方案：

struct ContentView: View {
    var body: some View {
        HStack {
            RectangleView(width: 100, height: 200, color: .yellow)
                .focusable()
                .focusEffect(.disabled) // 禁用焦点环
                .offset(x: 100, y: 150)
        
            RectangleView(width: 100, height: 200, color: .purple)
                .focusable()
                .focusEffect(.disabled) // 禁用焦点环
                .offset(x: 300, y: 60)
        }
        .frame(width: 600, height: 400, alignment: .topLeading)
        .padding()
    }
}

方法二：封装View扩展复用逻辑 #

如果需要在多个自定义View中复用这个逻辑，可以写一个View扩展，把禁用焦点环的逻辑封装起来：

extension View {
    func focusableWithoutRing() -> some View {
        self
            .focusable()
            .focusEffect(.disabled)
    }
}

使用时直接替换.focusable()为这个扩展方法即可：

RectangleView(width: 100, height: 200, color: .yellow)
    .focusableWithoutRing()
    .offset(x: 100, y: 150)

补充说明 #

.focusEffect(.disabled)是SwiftUI 3（对应macOS 12及以上）引入的API，完全适配macOS 13.0环境，既保留了View的可聚焦特性（比如支持键盘导航选中），又隐藏了蓝色焦点光晕。

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