SwiftUI 自定义 TextField 与 macOS 上的焦点环

Question

我想在 macOS 上使用我的自定义 TextField 样式，它也有焦点环

但是我遇到了 2 个问题，具体取决于我使用.textFieldStyle(.roundedBorder)还是.textFieldStyle(.plain)

struct FTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .textFieldStyle(.roundedBorder)
            .frame(maxWidth: .infinity)
            .padding(6)
            .foregroundColor(Color.black)
            .background(Color.white)
            .cornerRadius(6)
            .shadow(color: .black.opacity(0.25), radius: 2, x: 0, y: 0.5)
            .focusable()
    }
}

TextField("E-mail", text: $email).textFieldStyle(FTextFieldStyle())

使用 .roundedBorder 时

1. 对焦环错位

2. “挡板”无法移除

使用 .plain 时

• 我无法恢复对焦环功能，即使添加了 .focusable()，对焦环也不见了

那么如何拥有一个具有系统焦点环的自定义 TextField 呢？

Answer 1

您可以使用@FocusState & .overlay创建自定义焦点环：

struct FTextFieldStyle: TextFieldStyle {
    @FocusState var isFocused: Bool
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .textFieldStyle(.plain)
            .frame(maxWidth: .infinity)
            .padding(6)
            .foregroundColor(Color.black)
            .background(Color.white)
            .cornerRadius(6)
            .shadow(color: .black.opacity(0.25), radius: 2, x: 0, y: 0.5)
            .focusable()
            .focused($isFocused)
            .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color.accentColor.opacity(0.5), lineWidth: 4).opacity(isFocused ? 1 : 0).scaleEffect(isFocused ? 1 : 1.04))
            .animation(isFocused ? .easeIn(duration: 0.2) : .easeOut(duration: 0.0), value: isFocused)
    }
}