Picker and DatePicker in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Picker with three options.

iOS Swift

struct ContentView: View {
  @State private var selection = 0
  var body: some View {
    Picker("Select a number", selection: $selection) {
      Text("One").tag(0)
      Text("Two").tag(1)
      Text("Three").tag(2)
    }.pickerStyle([1]())
  }
}

Drag options to blanks, or click blank then click option'

ASegmentedPickerStyle

BWheelPickerStyle

CMenuPickerStyle

DDefaultPickerStyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using WheelPickerStyle shows a spinning wheel, not segments.

The SegmentedPickerStyle shows the picker as horizontal segments, which is a common simple style.

2fill in blank

medium

Complete the code to create a DatePicker that shows only the date, not time.

iOS Swift

struct ContentView: View {
  @State private var selectedDate = Date()
  var body: some View {
    DatePicker("Select date", selection: $selectedDate, displayedComponents: [1])
  }
}

Drag options to blanks, or click blank then click option'

A.date

B.hourAndMinute

C.dateAndTime

D.time

Attempts:

3 left

💡 Hint

Common Mistakes

Using .dateAndTime shows both date and time, which is not wanted here.

Using .date shows only the calendar date picker without time.

3fill in blank

hard

Fix the error in the Picker code by completing the missing binding.

iOS Swift

struct ContentView: View {
  @State private var selectedFruit = "Apple"
  let fruits = ["Apple", "Banana", "Cherry"]
  var body: some View {
    Picker("Select a fruit", selection: [1]) {
      ForEach(fruits, id: \.self) { fruit in
        Text(fruit).tag(fruit)
      }
    }
  }
}

Drag options to blanks, or click blank then click option'

A&selectedFruit

BselectedFruit

C$selectedFruit

DselectedFruitBinding

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the value directly without $ causes a compile error.

The Picker's selection needs a binding, so use $selectedFruit to pass the binding.

4fill in blank

hard

Fill both blanks to create a DatePicker that allows selecting only future dates starting from today.

iOS Swift

struct ContentView: View {
  @State private var date = Date()
  var body: some View {
    DatePicker("Pick a date", selection: $date, in: [1]..., displayedComponents: [2])
  }
}

Drag options to blanks, or click blank then click option'

ADate()

B.date

C.dateAndTime

DDate().addingTimeInterval(-86400)

Attempts:

3 left

💡 Hint

Common Mistakes

Using a past date or wrong displayedComponents shows unwanted options.

Using Date()... restricts selection to today and future dates. .date shows only the date picker.

5fill in blank

hard

Fill all three blanks to create a Picker that shows a wheel style and updates the selected index.

iOS Swift

struct ContentView: View {
  @State private var selectedIndex = 0
  let colors = ["Red", "Green", "Blue"]
  var body: some View {
    Picker("Choose color", selection: [1]) {
      ForEach(0..<colors.count, id: \.self) { index in
        Text(colors[index]).tag([2])
      }
    }.pickerStyle([3]())
  }
}

Drag options to blanks, or click blank then click option'

A$selectedIndex

Bindex

CWheelPickerStyle

DselectedIndex

Attempts:

3 left

💡 Hint

Common Mistakes

Using selectedIndex without $ causes errors.

Wrong tag values cause selection mismatch.

The Picker selection needs a binding $selectedIndex. The tag should be the index. The style is WheelPickerStyle for a spinning wheel.

Practice

1. What is the primary purpose of a Picker in SwiftUI?

easy

A. To input text from the keyboard

B. To display a calendar view for date selection

C. To let users select a value from a list of options

D. To show an alert message

Solution

1. Step 1: Understand Picker functionality

   A Picker is designed to let users choose from multiple options easily.

2. Step 2: Compare with other UI elements

   DatePicker is for dates, TextField is for text input, Alert is for messages.

3. Final Answer:

   To let users select a value from a list of options -> Option C

4. Quick Check:

   Picker = select from list [OK]

Hint: Picker = choose from list, DatePicker = choose date [OK]

Common Mistakes:

• Confusing Picker with DatePicker
• Thinking Picker inputs text
• Assuming Picker shows alerts

2. Which of the following is the correct syntax to create a simple Picker in SwiftUI?

easy

A. Picker { Text("One") } selection: $choice label: Text("Select")

B. Picker(selection: $choice) { Text("One") } label: { Text("Select") }

C. Picker(label: Text("Select"), selection: $choice) { Text("One") }

D. Picker(selection: choice) { Text("One") } label: Text("Select")

Solution

1. Step 1: Recall Picker initializer syntax

   The correct syntax uses named parameters: selection binding first, then content closure, then label closure.

2. Step 2: Check each option

   Picker(selection: $choice) { Text("One") } label: { Text("Select") } matches the correct syntax with $choice binding and label closure.

3. Final Answer:

   Picker(selection: $choice) { Text("One") } label: { Text("Select") } -> Option B

4. Quick Check:

   Picker syntax = selection: $var, content, label [OK]

Hint: Picker needs selection binding with $ and label closure [OK]

Common Mistakes:

• Omitting $ for binding
• Wrong parameter order
• Using non-closure label

3. Given this SwiftUI code snippet, what will be displayed when the user selects "Banana"?

struct ContentView: View {
  @State private var fruit = "Apple"
  var fruits = ["Apple", "Banana", "Cherry"]

  var body: some View {
    VStack {
      Picker("Select Fruit", selection: $fruit) {
        ForEach(fruits, id: \.self) { fruit in
          Text(fruit)
        }
      }
      Text("You chose: \(fruit)")
    }
  }
}

medium

A. You chose: Banana

B. You chose: "" (empty string)

C. You chose: Cherry

D. You chose: Apple

Solution

1. Step 1: Understand state binding in Picker

   The Picker binds to @State variable 'fruit', updating it when user selects an option.

2. Step 2: User selects "Banana"

   The state variable 'fruit' changes to "Banana", so the Text below shows "You chose: Banana".

3. Final Answer:

   You chose: Banana -> Option A

4. Quick Check:

   Picker selection updates state = displayed text [OK]

Hint: Picker updates bound state, Text shows updated value [OK]

Common Mistakes:

• Ignoring state update on selection
• Confusing initial value with selected value
• Not using id: \.self in ForEach

4. Identify the error in this DatePicker code snippet:

@State private var selectedDate = Date()

var body: some View {
  DatePicker("Pick a date", selection: selectedDate, displayedComponents: .date)
}

medium

A. DatePicker cannot display only date component

B. selectedDate must be a String, not Date

C. Label parameter must be omitted

D. Missing $ before selectedDate in selection binding

Solution

1. Step 1: Check binding syntax for DatePicker

   The selection parameter requires a binding, so it must be $selectedDate, not selectedDate.

2. Step 2: Verify other parameters

   Displaying only date is valid, label is required, and selectedDate is correctly a Date type.

3. Final Answer:

   Missing $ before selectedDate in selection binding -> Option D

4. Quick Check:

   Binding needs $ prefix [OK]

Hint: Always use $ for binding state variables [OK]

Common Mistakes:

• Forgetting $ in binding
• Using wrong data type for selection
• Misunderstanding displayedComponents usage

5. You want to create a SwiftUI view where users pick a time and a fruit from a list. Which code snippet correctly combines a DatePicker for time and a Picker for fruits with state variables?

hard

A. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker(selection: $time, displayedComponents: .hourAndMinute) { Text("Select Time") }
Picker(selection: $fruit) {
ForEach(fruits, id: \.self) { Text($0) }
} label: { Text("Select Fruit") }
}
}
}

B. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute)
Picker("Select Fruit", selection: fruit) {
ForEach(fruits, id: \.self) { Text($0) }
}
}
}
}

C. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute)
Picker("Select Fruit", selection: $fruit) {
ForEach(fruits, id: \.self) { Text($0) }
}
}
}
}

D. struct ContentView: View {
@State private var time = Date()
@State private var fruit = "Apple"
let fruits = ["Apple", "Banana"]

var body: some View {
VStack {
DatePicker("Select Time", selection: $time)
Picker("Select Fruit", selection: $fruit) {
ForEach(fruits, id: \.self) { Text($0) }
}
}
}
}

Solution

1. Step 1: Check DatePicker syntax with label closure

   struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker(selection: $time, displayedComponents: .hourAndMinute) { Text("Select Time") } Picker(selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } label: { Text("Select Fruit") } } } } uses DatePicker with selection binding and label closure, which is valid syntax.

2. Step 2: Check Picker syntax with label closure

   Picker in struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker(selection: $time, displayedComponents: .hourAndMinute) { Text("Select Time") } Picker(selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } label: { Text("Select Fruit") } } } } uses selection binding and label closure correctly, with ForEach and id: \.self.

3. Step 3: Verify other options

   struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute) Picker("Select Fruit", selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } } } } lacks $ for DatePicker selection binding, struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker("Select Time", selection: time, displayedComponents: .hourAndMinute) Picker("Select Fruit", selection: fruit) { ForEach(fruits, id: \.self) { Text($0) } } } } } lacks $ for bindings, struct ContentView: View { @State private var time = Date() @State private var fruit = "Apple" let fruits = ["Apple", "Banana"] var body: some View { VStack { DatePicker("Select Time", selection: $time) Picker("Select Fruit", selection: $fruit) { ForEach(fruits, id: \.self) { Text($0) } } } } } misses displayedComponents for time.

4. Final Answer:

   The code using selection-first initializers with label closures -> Option A

5. Quick Check:

   Use bindings with $ and label closures for both controls [OK]

Hint: Use $ for bindings and label closures for Picker and DatePicker [OK]

Common Mistakes:

• Omitting $ in bindings
• Missing label closures
• Not specifying displayedComponents for time