[SwiftUI] Group , GroupBox

Group

: A type that collects multiple instances of a content type — like views, scenes, or commands — into a single unit.

Use a group to collect multiple views into a single instance, without affecting the layout of those views, like an HStack, VStack, or Section would. After creating a group, any modifier you apply to the group affects all of that group’s members.

 

This is particularly important because, for underlying technical reasons, you can only add up to 10 views to a parent view at a time

 

/* ERROR
var body: some View {
    VStack {
        
        Group {
            Text("abc#1")
            Text("abc#2")
            Text("abc#3")
            Text("abc#4")
            Text("abc#5")
            Text("abc#6")
            Text("abc#7")
            Text("abc#8")
            Text("abc#9")
            Text("abc#10")
            Text("abc#11")
        }
    }
} */

var body: some View {
    VStack {
        
        Group {
            Text("abc#1")
            Text("abc#2")
            Text("abc#3")
            Text("abc#4")
            Text("abc#5")
            Text("abc#6")
            Text("abc#7")
            Text("abc#8")
            Text("abc#9")
            Text("abc#10")
        }
        Text("abc#11")
    }
}

 

There are 2 main reasons to use a Group:

• To exceed the 10 struct limitation of a function builder
• To improve code readability.

 

Use this structure to group together structures of different types. There are five different types of groups. Each groups together a type of content.

1. ToolbarContent
2. CustomizableToolbarContent
3. Scene
4. View
5. Commands

 

GroupBox

: A stylized view, with an optional label, that visually collects a logical grouping of content.

 

Use a group box when you want to visually distinguish a portion of your user interface with an optional title for the boxed content.

 

var body: some View {
    GroupBox(label: Label("Smile", systemImage: "smiley")) {
        Text("Today is good")
    }
    .frame(width: 200)
    .padding()
}

    let agreementText: String = """
Not like the brazen giant of Greek fame,
With conquering limbs astride from land to land;
Here at our sea-washed, sunset gates shall stand
A mighty woman with a torch, whose flame
Is the imprisoned lightning, and her name
Mother of Exiles. From her beacon-hand
Glows world-wide welcome; her mild eyes command
The air-bridged harbor that twin cities frame.
“Keep, ancient lands, your storied pomp!” cries she
With silent lips. “Give me your tired, your poor,
Your huddled masses yearning to breathe free,
The wretched refuse of your teeming shore.
Send these, the homeless, tempest-tost to me,
I lift my lamp beside the golden door!”
"""
    @State private var userAgreed: Bool = false
    
    var body: some View {
        GroupBox(label:
                Label("The New Colossus", systemImage: "building.columns")
            ) {
                ScrollView(.vertical, showsIndicators: true) {
                    Text(agreementText)
                        .font(.footnote)
                }
                .frame(height: 100)
                Toggle(isOn: $userAgreed) {
                    Text("Did you finish reading it?")
                }
            }
        }
    }