Login required for access
In order to watch this lesson, you'll need to login to the website.
Card Form Pickers
SwiftUI Core Data Spending Tracker with ChartsIn this lesson, let's take a look at adding various pickers to our AddCardForm component. Two pickers that we'll use are called Picker and ColorPicker. To use these components, we'll have to establish some state variables to maintain their selections.
AddCardForm
Modify your code as seen below to include the proper @State variables along with the section of Picker components.
AddCardForm.swift
struct AddCardForm: View { @Environment(\.presentationMode) var presentationMode // 1 @State private var name = "" @State private var cardNumber = "" @State private var limit = "" @State private var cardType = "Visa" @State private var month = 1 @State private var year = Calendar.current.component(.year, from: Date()) @State private var color = Color.blue let currentYear = Calendar.current.component(.year, from: Date()) var body: some View { NavigationView { Form { Section(header: Text("Card Info")) { TextField("Name", text: $name) TextField("Credit Card Number", text: $cardNumber) .keyboardType(.numberPad) TextField("Credit Limit", text: $limit) .keyboardType(.numberPad) Picker("Type", selection: $cardType) { ForEach(["Visa", "Mastercard", "Discover", "Citibank"], id: \.self) { cardType in Text(String(cardType)).tag(String(cardType)) } } } Section(header: Text("Expiration")) { Picker("Month", selection: $month) { ForEach(1..<13, id: \.self) { num in Text(String(num)).tag(String(num)) } } Picker("Year", selection: $year) { ForEach(currentYear..<currentYear + 20, id: \.self) { num in Text(String(num)).tag(String(num)) } } } Section(header: Text("Color")) { ColorPicker("Color", selection: $color) } } .navigationTitle("Add Credit Card") .navigationBarItems(leading: Button(action: { presentationMode.wrappedValue.dismiss() }, label: { Text("Cancel") })) } }} Comments (0)
Please contact admin@letsbuildthatapp.com if you have any issues.