SwiftUI 如何在 TextField 上添加边框?

7 min read

您可以使用 .textFieldStyle() 修饰符将自定义的 TextField 样式应用于特定 TextField。以下是一种实现 TextField 边框的示例方法:

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        TextField("Enter text", text: $text)
            .padding()
            .textFieldStyle(CustomTextFieldStyle())
    }
}

struct CustomTextFieldStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(.horizontal)
            .padding(.vertical, 10)
            .background(Color.white)
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(lineWidth: 1)
                    .foregroundColor(Color.gray)
            )
    }
}

在这个代码片段中,我们首先创建一个名为 text 的状态变量,用于存储用户在 TextField 中输入的文本。然后我们使用 TextField 创建了一个文本输入框,并传递给 textFieldStyle() 一个自定义的样式,该样式实现了 TextField 边框的功能。

自定义 TextField 样式实现起来相对简单,它实现了 TextFieldStyle 协议,并且可以使用 SwiftUI 提供的修饰符和布局在 TextField 上添加颜色、边框等样式。具体地,我们在样式中使用 .background().overlay() 修饰符以及 RoundedRectangle 创建具有边框和填充的 TextField。根据需求您可以修改颜色、圆角半径和笔画宽度。