SwiftUI中如何修改TextField的边框颜色？

嘿，我之前也踩过这个坑！默认的.roundedBorder()样式是系统封装好的，确实没法直接修改它的边框颜色，不过咱们可以用两种简单的方法实现点击按钮后显示红色边框的需求，我给你一步步讲清楚~

方法一：用Overlay叠加错误边框 #

这种方法的好处是保留系统自带的圆角边框样式，只在需要的时候叠加一层红色边框，非常省事。

首先，我们需要一个状态变量来控制“是否显示错误”的状态，再结合TextField和按钮来实现：

struct FirstViewController: View {
    @Environment(\.managedObjectContext) private var viewContext
    @State private var inputText = "" // 绑定TextField的输入内容
    @State private var showErrorBorder = false // 控制是否显示红色边框
    
    var body: some View {
        VStack(spacing: 20) {
            TextField("请输入内容", text: $inputText)
                .textFieldStyle(.roundedBorder)
                // 叠加红色边框，只有showErrorBorder为true时显示
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(showErrorBorder ? .red : .clear, lineWidth: 1)
                )
            
            Button("检查输入") {
                // 这里可以替换成你的判断逻辑，比如输入为空就触发错误
                showErrorBorder = inputText.isEmpty
            }
            .foregroundColor(.blue)
        }
        .padding()
    }
}

方法二：自定义TextFieldStyle #

如果想要更灵活的样式（比如修改背景色、调整圆角大小），可以自定义一个TextFieldStyle，把错误状态作为参数传进去：

// 自定义圆角边框样式
struct ErrorRoundedBorderStyle: TextFieldStyle {
    var isError: Bool
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(8)
            .background(Color(.systemGray6)) // 模拟系统默认背景色
            .cornerRadius(8) // 匹配系统圆角大小
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(isError ? .red : .gray.opacity(0.3), lineWidth: 1)
                // 正常状态显示浅灰色边框，错误状态显示红色
            )
    }
}

// 在视图中使用
struct FirstViewController: View {
    @Environment(\.managedObjectContext) private var viewContext
    @State private var inputText = ""
    @State private var showError = false
    
    var body: some View {
        VStack(spacing: 20) {
            TextField("请输入内容", text: $inputText)
                .textFieldStyle(ErrorRoundedBorderStyle(isError: showError))
            
            Button("检查输入") {
                showError = inputText.isEmpty
            }
            .foregroundColor(.blue)
        }
        .padding()
    }
}

这两种方法都能完美实现你要的效果，第一种更简单快捷，第二种适合需要定制样式的场景，你可以根据自己的需求选~

备注：内容来源于stack exchange，提问作者sol0vanti