How to Use Picker with Tag in iOS SwiftUI

SwiftUI has made it easier than ever to create stunning UI elements for iOS and macOS apps. One such element is the Picker, which allows users to select from a list of options. In this blog post, we’ll dive deep into how to use the tag modifier with SwiftUI Picker. This will help you create more dynamic and user-friendly pickers in your apps.

What is SwiftUI Picker?

SwiftUI Picker is a UI element that lets users choose from a list of options. It’s similar to a dropdown menu. You can use it in various forms, like a wheel picker or a menu picker. The tag modifier helps in identifying the selected option.

Why Use Tag in SwiftUI Picker?

Using the tag modifier makes it easier to manage the state of the Picker. It helps you identify which option the user has selected. This is especially useful when you have a list of complex objects.

How to Use Tag with SwiftUI Picker

Create a State Variable

First, create a state variable to hold the selected value.

@State private var selectedOption = "Option 1"

Add the Picker

Next, add the Picker element to your SwiftUI view.

Picker("Choose an option", selection: $selectedOption) {
    // Picker options go here
}

Add Options with Tag

Now, add the options for the Picker and use the tag modifier.

Text("Option 1").tag("Option 1")
Text("Option 2").tag("Option 2")
Text("Option 3").tag("Option 3")

Combine Everything

Here’s how it all comes together:

import SwiftUI

struct ContentView: View {
    @State private var selectedOption = "Option 1"

    var body: some View {
        Picker("Choose an option", selection: $selectedOption) {
            Text("Option 1").tag("Option 1")
            Text("Option 2").tag("Option 2")
            Text("Option 3").tag("Option 3")
        }
    }
}

Example: Picker with Custom Objects

You can also use the tag modifier with custom objects. Just make sure the object conforms to the Hashable protocol.

import SwiftUI

struct Item: Hashable {
    var id: Int
    var name: String
}

struct ContentView: View {
    @State private var selectedItem = Item(id: 1, name: "Item 1")
    let items = [
        Item(id: 1, name: "Item 1"),
        Item(id: 2, name: "Item 2"),
        Item(id: 3, name: "Item 3")
    ]

    var body: some View {
        Picker("Choose an item", selection: $selectedItem) {
            ForEach(items, id: \.self) { item in
                Text(item.name).tag(item)
            }
        }
    }
}

Conclusion

Using the tag modifier with SwiftUI Picker is a powerful way to create dynamic and interactive UI elements. It simplifies the process of tracking selected options, making your app more user-friendly and efficient.