Picker and DatePicker in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this SwiftUI Picker code?

Consider this SwiftUI code snippet for a Picker. What will the user see and how will the Picker behave?

iOS Swift

struct ContentView: View {
  @State private var selectedColor = "Red"
  let colors = ["Red", "Green", "Blue"]

  var body: some View {
    Picker("Select a color", selection: $selectedColor) {
      ForEach(colors, id: \.self) { color in
        Text(color).tag(color)
      }
    }
    .pickerStyle(.wheel)
  }
}

A A segmented control with three buttons labeled Red, Green, and Blue. The user taps to select a color.

B A list of colors displayed vertically. The user taps a color to select it.

C A text field where the user types the color name manually.

D A wheel-style picker showing Red, Green, and Blue. The user can spin the wheel to select a color. The selected color updates the state variable.

💡 Hint

Look at the .pickerStyle modifier to understand the Picker's appearance.

The .wheel picker style creates a spinning wheel UI. The ForEach creates options from the colors array. The selection binding updates the selectedColor state.

❓ ui_behavior

intermediate

What happens when you change the DatePicker's displayedComponents?

Given this SwiftUI DatePicker code, what will the user see if displayedComponents is set to [.date] only?

iOS Swift

struct ContentView: View {
  @State private var selectedDate = Date()

  var body: some View {
    DatePicker("Select date and time", selection: $selectedDate, displayedComponents: [.date])
      .datePickerStyle(.compact)
  }
}

A The user sees a compact date picker that lets them pick only the date, not the time.

B The user sees a time-only picker without date selection.

C The user sees a picker that lets them select both date and time.

D The picker shows no UI because displayedComponents is invalid.

💡 Hint

Check the displayedComponents parameter to control what parts of date/time are shown.

Setting displayedComponents to [.date] restricts the picker to show only the date selection UI. Time selection is hidden.

❓ lifecycle

advanced

What is the effect of changing the @State variable bound to a Picker?

In SwiftUI, if you programmatically change the @State variable bound to a Picker's selection, what happens to the Picker's UI?

iOS Swift

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

  var body: some View {
    VStack {
      Picker("Select fruit", selection: $selectedFruit) {
        ForEach(fruits, id: \.self) { fruit in
          Text(fruit).tag(fruit)
        }
      }
      Text("You selected: \(selectedFruit)")
      Button("Select Banana") {
        selectedFruit = "Banana"
      }
    }
  }
}

A The app crashes because the state variable is changed programmatically.

B The Picker UI does not change until the user interacts with it.

C The Picker UI updates immediately to show Banana as selected.

D The Picker resets to the first item in the list.

💡 Hint

Think about how SwiftUI updates views when state changes.

Changing the @State variable triggers SwiftUI to re-render the Picker with the new selection reflected immediately.

📝 Syntax

advanced

What error does this DatePicker code produce?

Examine this SwiftUI DatePicker code. What error will it cause?

iOS Swift

struct ContentView: View {
  @State private var date = Date()

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

A No error, code compiles and runs correctly.

B Type error: Cannot convert value of type 'DatePickerComponents' to expected argument type 'Set<DatePickerComponents>'

C Syntax error: Missing parentheses around .date

D Runtime error: DatePicker crashes when displayedComponents is not a set.

💡 Hint

Look carefully at the type expected for displayedComponents parameter.

The displayedComponents parameter expects a Set of DatePickerComponents, but .date alone is a single value, not a Set.

🧠 Conceptual

expert

Why use a Picker over a DatePicker for selecting options?

In iOS SwiftUI, when should you prefer using a Picker instead of a DatePicker?

A Use Picker when selecting from a fixed list of options like colors or fruits; use DatePicker only for dates and times.

B Use Picker only for dates; DatePicker is for general lists.

C Use DatePicker when you want a wheel UI for any selection, Picker for buttons only.

D Picker and DatePicker are interchangeable and can be used for any selection.

💡 Hint

Think about the purpose of each control and the type of data they handle.

Picker is designed for choosing from a list of discrete options. DatePicker is specialized for selecting dates and times.