tvOS中SwiftUI TextField聚焦状态自定义：移除默认展开与阴影

要移除tvOS TextField聚焦时的默认展开和阴影效果，并实现自定义样式，你需要做以下关键调整：

1. 禁用系统默认聚焦效果 #

tvOS的TextField默认聚焦效果（缩放、阴影）可以通过.focusEffectDisabled()修饰符直接关闭，这是消除系统默认视觉干扰的核心操作。

2. 正确管理聚焦状态并实现自定义样式 #

你之前的自定义TextFieldStyle中，内部持有@FocusState的方式是错误的——每个TextField实例的聚焦状态应该由外部视图管理，而非样式内部。下面是修正后的完整实现：

完整代码示例 #

struct ContentView: View {
    @State var name: String = ""
    @State var address: String = ""
    // 用枚举统一管理多个TextField的聚焦状态，更整洁
    @FocusState private var focusedField: Field?
    
    enum Field {
        case name, address
    }
    
    var body: some View {
        VStack {
            TextField("Name", text: $name)
                .textFieldStyle(OutlinedTextFieldStyle(isFocused: focusedField == .name))
                .focused($focusedField, equals: .name)
                .focusEffectDisabled() // 关闭系统默认聚焦效果
            
            TextField("Address", text: $address)
                .textFieldStyle(OutlinedTextFieldStyle(isFocused: focusedField == .address))
                .focused($focusedField, equals: .address)
                .focusEffectDisabled()
        }
        .padding(200.0)
        .background(.white)
        .preferredColorScheme(.light)
    }
}

struct OutlinedTextFieldStyle: TextFieldStyle {
    let isFocused: Bool
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .background(.clear)
            // 自定义聚焦边框样式
            .overlay(
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .stroke(isFocused ? .blue : .gray, lineWidth: isFocused ? 4 : 2)
                    .animation(.easeInOut(duration: 0.2), value: isFocused)
            )
            // 可选：自定义聚焦缩放效果
            .scaleEffect(isFocused ? 1.05 : 1.0)
            // 可选：自定义聚焦阴影
            .shadow(color: isFocused ? .blue.opacity(0.3) : .clear, radius: 8, x: 0, y: 2)
    }
}

关键细节说明 #

• 聚焦状态管理：通过枚举Field和@FocusState统一管理多个TextField的聚焦状态，避免每个TextField单独维护状态的冗余。
• 自定义样式扩展：在OutlinedTextFieldStyle中，你可以根据isFocused参数自由添加任何聚焦时的视觉变化——比如改变边框颜色/宽度、添加自定义阴影、缩放动画等。
• 平滑过渡：添加.animation()修饰符让聚焦状态切换时的视觉变化更自然。

如果仅需单个TextField的自定义样式，也可以简化为单独的@FocusState变量：

struct ContentView: View {
    @State var name: String = ""
    @FocusState private var nameIsFocused: Bool
    
    var body: some View {
        TextField("Name", text: $name)
            .textFieldStyle(OutlinedTextFieldStyle(isFocused: nameIsFocused))
            .focused($nameIsFocused)
            .focusEffectDisabled()
        // ...其他视图
    }
}

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