SwiftUI TextField应用条件样式时失去焦点问题求助

问题根源 #

你当前通过.if动态添加/移除border修饰符，这种方式会让SwiftUI在验证状态变化时，销毁并重建TextField所在的视图节点，导致焦点丢失。

解决方案：保持视图结构稳定 #

核心思路是不改变视图层级结构，通过动态调整修饰符的参数来实现条件样式，而不是添加/移除修饰符。这里推荐用overlay实现红色边框提示：

修改后的完整代码

import SwiftUI
import Combine

struct MyView : View {
    @Binding var value: Int
    var label: String
    var maxLength: Int
    
    @State private var valid: Bool = true
    
    var body: some View {
        TextField(label, value: $value, format: .number)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .fixedSize()
            .multilineTextAlignment(.trailing)
            .onReceive(Just(value), perform: validate)
            // 用overlay实现条件边框，视图结构始终不变
            .overlay(
                RoundedRectangle(cornerRadius: 6) // 匹配默认圆角样式的圆角值
                    .stroke(valid ? .clear : .red, lineWidth: 1)
            )
    }
    
    func validate(val: Int) {
        let newVal = val.clamped(to: 0...maxLength)
        if newVal != val {
            valid = false
            value = newVal // 自动修正输入值到合法范围
        } else {
            valid = true
        }
    }
}

extension Comparable {
    func clamped(to limits: ClosedRange<Self>) -> Self {
        return min(max(self, limits.lowerBound), limits.upperBound)
    }
}

关键优化点 #

1. 稳定视图结构：用overlay替代动态添加border，无论验证状态如何，视图层级都保持一致，不会触发重建，自然不会丢失焦点。
2. 自动修正输入值：在验证时直接将value修正到合法范围，避免用户停留在无效值状态。
3. 视觉提示更和谐：通过描边叠加在默认边框上，不会破坏原有的TextField样式。

其他可选优化 #

如果需要更精细的焦点控制，可以结合@FocusState手动管理焦点，但上述方案已经能解决核心问题，且实现更简洁。

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