TextField trong SwiftUI
1. Cơ bản
@State private var text = ""
TextField("Placeholder", text: $text)2. Styles
TextField("Email", text: $email)
.textFieldStyle(.roundedBorder)
TextField("Search", text: $search)
.textFieldStyle(.plain)3. Keyboard Types
TextField("Email", text: $email)
.keyboardType(.emailAddress)
.autocapitalization(.none)
.textContentType(.emailAddress)
TextField("Phone", text: $phone)
.keyboardType(.phonePad)
TextField("Number", text: $number)
.keyboardType(.decimalPad)4. Focus State
struct LoginForm: View {
@State private var email = ""
@State private var password = ""
@FocusState private var focusedField: Field?
enum Field {
case email, password
}
var body: some View {
VStack {
TextField("Email", text: $email)
.focused($focusedField, equals: .email)
SecureField("Password", text: $password)
.focused($focusedField, equals: .password)
Button("Login") {
focusedField = nil // Dismiss keyboard
}
}
.onSubmit {
if focusedField == .email {
focusedField = .password
}
}
}
}5. Custom Styling
TextField("Username", text: $username)
.padding()
.background(.gray.opacity(0.1))
.cornerRadius(10)
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(isFocused ? .blue : .clear, lineWidth: 2)
)6. Với Axis (iOS 16+)
TextField("Description", text: $description, axis: .vertical)
.lineLimit(3...6)📝 Tóm tắt
| Modifier | Mục đích |
|---|---|
.textFieldStyle | Appearance |
.keyboardType | Keyboard layout |
.focused | Focus management |
.onSubmit | Return key action |
Last updated on