macOS 上带有聚焦环的 SwiftUI 自定义 TextField

Question

我想在 macOS 上拥有自定义 TextField 样式，它也有对焦环

但是我遇到了两个问题，具体取决于我是否使用.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)
    }
}