Skip to Content

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

ModifierMục đích
.textFieldStyleAppearance
.keyboardTypeKeyboard layout
.focusedFocus management
.onSubmitReturn key action
Last updated on