You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

168 lines
5.7 KiB

import SwiftUI
// MARK: -
struct ContactInputView: View {
@Binding var firstName: String
@Binding var lastName: String
@Binding var phone: String
@Binding var email: String
@Binding var company: String
@Binding var title: String
@Binding var address: String
@Binding var website: String
@FocusState var focusedField: ContactField?
//
enum ContactField: Hashable {
case firstName, lastName, phone, email, company, title, address, website
}
var body: some View {
VStack(spacing: 16) {
//
HStack(spacing: 12) {
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("")
.font(.subheadline)
.foregroundColor(.primary)
Text("*")
.foregroundColor(.red)
Spacer()
}
TextField("", text: $firstName)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .firstName)
}
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("")
.font(.subheadline)
.foregroundColor(.primary)
Text("*")
.foregroundColor(.red)
Spacer()
}
TextField("", text: $lastName)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .lastName)
}
}
//
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("电话")
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("+86 138 0013 8000", text: $phone)
.textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.phonePad)
.focused($focusedField, equals: .phone)
}
//
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("邮箱")
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("user@example.com", text: $email)
.textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.emailAddress)
.autocapitalization(.none)
.focused($focusedField, equals: .email)
}
//
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("公司")
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("公司名称", text: $company)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .company)
}
//
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("职位")
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("职位名称", text: $title)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .title)
}
//
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("地址")
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("详细地址", text: $address)
.textFieldStyle(RoundedBorderTextFieldStyle())
.focused($focusedField, equals: .address)
}
//
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("网站")
.font(.subheadline)
.foregroundColor(.primary)
Spacer()
}
TextField("https://example.com", text: $website)
.textFieldStyle(RoundedBorderTextFieldStyle())
.keyboardType(.URL)
.autocapitalization(.none)
.focused($focusedField, equals: .website)
}
}
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
Spacer()
Button("完成") {
focusedField = nil
}
.foregroundColor(.blue)
.font(.system(size: 16, weight: .medium))
}
}
}
}
#Preview {
ContactInputView(
firstName: .constant(""),
lastName: .constant(""),
phone: .constant(""),
email: .constant(""),
company: .constant(""),
title: .constant(""),
address: .constant(""),
website: .constant("")
)
}