Group in SwiftUI
Group in SwiftUI is a type that collects multiple instances of a content type — like views, scenes, or commands — into a single unit. Group doesn’t have any visual representation, its just a container much like VStack and HStack.
We use a group to collect multiple views into a single instance, without affecting the layout of those views, just like an HStack, VStack, or Section . After creating a group, any modifier applied to the group affects all of that group’s members.
Let’s start with example.
struct DevTechieGroupExample: View {
var body: some View {
VStack {
Text("DevTechie Courses")
.font(.largeTitle)
Group {
Text("SwiftUI")
Text("Combine")
Text("iOS Development")
}.font(.body)
}
}
}
Because we create a group of views with a ViewBuilder, we can use the group’s initializer to produce different kinds of views from a conditional, and then optionally apply modifiers to them.
The following example uses a Group to add a navigation bar title, regardless of the type of view the conditional produces.
struct DevTechieGroupExample: View {
@State private var loggedIn = true
var body: some View {
NavigationView {
Group {
if loggedIn {
Text("Welcome DevTechie!")
} else {
Text("Please login!")
}
}
.navigationTitle("DevTechie Courses")
}
}
}
Modifiers are applied on members of the group individually not to the Group view itself. Meaning when we set font or foregroundColor modifier for the Group, all the member views get those modifiers.
struct DevTechieGroupExample: View {
var body: some View {
VStack {
Text("DevTechie Courses")
.font(.largeTitle)
Group {
Text("SwiftUI")
Text("Combine")
Text("iOS Development")
}
.font(.body)
.foregroundColor(.orange)
}
}
}
Max 10 direct child view rule applies to Group as well but we can compose a group within other view builders, including nesting within other groups. This allows us to add large numbers of views to different view builder containers.
struct DevTechieGroupExample: View {
var body: some View {
VStack {
Text("DevTechie Courses")
.font(.largeTitle)
Group {
Text("UIkit")
Text("SwiftUI")
Text("Combine")
Text("iOS Development")
Text("Swift")
Text("Machine Learning")
Text("Flutter")
Text("Firebase")
Group {
Text("Android")
Text("Java")
Text("Kotlin")
}
}
.font(.body)
.foregroundColor(.orange)
}
}
}
With that we have reached the end of this article. Thank you once again for reading. If you liked this, don’t forget to 👏 and follow 😍. Also subscribe to our weekly newsletter at https://www.devtechie.com