Hi coders, today, I’d like to share my summary of use cases of SwiftUI Group. You might already know that a group can be used to group elements in SwiftUI (apparently🤣), however, it’d be very helpful to know common use cases to increase the code quality and avoid some issues.

The code of this post is available here.

Let’s get started.

1 - Break the SwiftUI view count limit

In SwiftUI, a layout element can only contain up to 10 elements. If we have to include more than 10 elements, Xcode will give us an error message: Extra argument in call.

For instance, in the VStack below, I have added 11 text views inside a VStack. But after the last text view is added, the error shows up.

To fix this, we can group some elements into a group, or just use two groups to wrap existing text views to add even more (if needed), like the code below:

Since a group is a SwiftUI view, now the VStack only holds two elements and we can add more elements inside the VStack.

2 - Conditional View

It is common that we need to present a view only when a condition is met. In that case, we can simply wrap the view with an if statement. But what if the view is within a computed property or a function returning a some View?

Our Group can help in this case.

Let’s say I can a computed property, just like a body property in a content view. Add the content should be presented only when a condition is true. If I since wrap it with an if statement, Xcode will give me an error: Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type.

Let’s try this with a group. You can see the error is now gone.

3 - Reusable modifiers

You might be wondering: why don’t you just add an else statement after if to make it always return a view?

Very good question, we can do that. But there’s but.

Let’s give it an else statement, in which another text view will be returned. What if I want to add a padding to the entire some View property? Of course, we can wrap the condition statements with a group and add the modifiers for the group, only once.

    private var groupedIfStatement: some View {
        Group {
            if true {
                Text("I’m true")
            } else {
                Text("I’m false")
            }
        }
        .padding()
    }

4 - User Interaction

Speaking of view modifiers, there’re some types of modifiers that can have an impact on user interaction - gestures.

Say I have a list of text views, and I want to perform certain actions when the user taps some of them (ex. the code below will print some texts in the debug console).

Without a group, I’ll have to add onTapGesture to all the elements that need to be responsive. Also, if we add the modifier to the VStack, all elements inside it, even if the first text, which should not perform the action, will be able to trigger the action. That’s not what we want.

Now we can only group the elements that need to be responsive to the tap gesture, and style it or add the on-tap actions, et voila.

Well, that’s all of today’s content. Leave a comment and let me know if it’s helpful.

If you’d like to receive posts like this via email, please subscribe to my newsletter. I’ll see you all in the next post.