如何在 MacOS 上的 SwiftUI 中禁用按钮周围的对焦环（或突出显示）？

Question

我的应用程序包含两个按钮，并且，为了成为一名优秀的平台公民，我希望用户在打开

System Settings > Keyboard > Keyboard navigation

时能够使用键盘导航它们。

然而，这在我的按钮周围产生了一个非常可怕的亮点，我似乎无法摆脱它。

理想情况下，我想在按钮具有焦点时自定义按钮样式（例如更改背景或使文本加粗）。

请参见下图，其中左侧按钮具有焦点，并且周围有一个丑陋的橙色环，部分遮挡了投影：

Answer 1

焦点突出显示的颜色源自您的强调色。因此，如果您想将其更改为更中性的颜色，您可以更改强调色。

为了更好地控制样式，您可以应用自己的

ButtonStyle

：

• 如果您想在按钮具有焦点时对按钮进行不同的样式，您可以使用

  FocusState

  变量检测按钮何时具有焦点，然后将标志传递给样式。
• 可以通过应用

  .focusEffectDisabled()

  来禁用焦点边框。

struct MyButtonStyle: ButtonStyle {
    let isFocused: Bool
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .frame(minWidth: 100)
            .foregroundStyle(.black)
            .fontWeight(isFocused ? .bold : .regular)
            .border(.black)
            .background(
                Group {
                    isFocused ? Color.yellow : Color.white
                }
                .shadow(color: .black, radius: 4, x: 2, y: 2)
            )
    }
}

struct ContentView: View {

    enum ButtonPurpose {
        case start
        case reset
    }

    @FocusState private var isFocused: ButtonPurpose?

    var body: some View {
        HStack(spacing: 20) {
            Button("Start") {}
                .focused($isFocused, equals: .start)
                .buttonStyle(MyButtonStyle(isFocused: isFocused == .start))
                .focusEffectDisabled()
            Button("Reset") {}
                .focused($isFocused, equals: .reset)
                .buttonStyle(MyButtonStyle(isFocused: isFocused == .reset))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.red)
    }
}

焦点效果仅在第一个按钮上被禁用，因此在第二个按钮上仍然可以看到：