LabeledContent in SwiftUI

As developers, we often need to display a value alongside a label, and manually arranging this can be difficult.

But LabeledContent, a powerful and versatile view that simplifies this common UI pattern.

What Is LabeledContent?

At its core, LabeledContent is a straightforward view that combines a label and content.

It's like a dynamic duo that works together seamlessly.

Let's dive into how it works and explore some practical examples.

Basic Usage

The basic usage of LabeledContent involves providing a label and a corresponding value.

Here's a simple example:

struct ContentView: View {
    var body: some View {
        Form {
            LabeledContent("Label", value: "Content")
        }
    }
}

In the example below we use different ways to create some LabeledContent:

struct ContentView: View {
    var body: some View {
        Form {
            Section {
                // Version 1: String label & String value
                LabeledContent("Pikachu", value: "#25")

                // Version 2: String label & formatted value
                LabeledContent("Pikachu", value: 25, format: .number)

                // Version 3: String label & any View as value
                LabeledContent("Region") {
                    Image(systemName: "globe.europe.africa.fill")
                    Text("Kanto")
                }

                // Version 4: Any View as value & any View as a label
                LabeledContent {
                    Text("#025 Pikachu")
                    Text("#149 Dragonite")
                    Text("#249 Lugia")
                    Text("#145 Zapdos")
                    Text("#150 Mewtwo")
                    Text("#132 Ditto")
                } label: {
                    Text("Team")
                    Text("#1")
                }
            }
        }
    }
}

Download the Swift Playground here

Conclusion

In summary, LabeledContent is a powerful tool for creating well-organized and visually appealing UIs.

Whether you're displaying simple strings or complex views, it streamlines the process and adheres to design guidelines.

Resources:

https://developer.apple.com/documentation/swiftui/labeledcontent/