swift - 如何在 TextField (SwiftUI) 上添加底线

Question

我使用 Rectangle() 在 TextField (SwiftUI) 上添加底部边框

但我想使用 protocol TextFieldStyle 作为 TextField Style 的底线，如 RoundedBorderTextFieldStyle

如何在不使用 Rectangle 的情况下为 TextField 自定义样式？

https://developer.apple.com/documentation/swiftui/staticmember

struct ContentView : View {
    @State private var username = "Text Hellow"
    var body: some View {
        VStack() {
            TextField($username)
                .foregroundColor(Color.yellow)
            Rectangle()
                .frame(height: 1.0, alignment: .bottom)
                .relativeWidth(1)
                .foregroundColor(Color.red)

        }
        .padding()
    }

    func editChanged() {

    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Answer 1

分隔线

可用于分隔其他内容的视觉元素。

您可以设置颜色和高度

Divider()
 .frame(height: 1)
 .padding(.horizontal, 30)
 .background(Color.red)

struct LoginField: View {

    @State private var email: String = ""
    @State private var password: String = ""

    var body: some View {
        VStack {
            TextField("Email", text: $email)
                .padding(.horizontal, 30).padding(.top, 20)
            Divider()
                .padding(.horizontal, 30)
            TextField("Password", text: $password)
                .padding(.horizontal, 30).padding(.top, 20)
            Divider()
                .padding(.horizontal, 30)
            Spacer()
        }
    }
}