Skip to main content
Group(children: Component): Component;
Group(children: Component[]): Component;
Group(subviews: Component, transform: (subviews: Component[]) => Component): Component;

​
Parameters

​
children
Component | Component[]
A single child component or an array of child components to group together.
​
subviews
Component
The child components to transform.
​
transform
(subviews: Component[]) => Component
A transformation function that receives the child components and returns a transformed component.

​
Support

​
Usage

​
Basic grouping

Group([
    Text("First item"),
    Text("Second item"),
    Text("Third item")
])
.opacity(0.8)
.scaleEffect(1.2)

​
Single child group

Group(
    VStack([
        Text("Title"),
        Text("Subtitle")
    ])
)
.rotationEffect(15)

​
Group with transformation

Group(
    HStack([
        Rectangle().fill(Color("red")),
        Rectangle().fill(Color("green")),
        Rectangle().fill(Color("blue"))
    ]),
    (subviews) => {
        // Transform the grouped components
        return VStack(subviews)
    }
)

​
Applying effects to groups

Group([
    Circle().fill(Color("red")).frame({ width: 50, height: 50 }),
    Circle().fill(Color("green")).frame({ width: 50, height: 50 }),
    Circle().fill(Color("blue")).frame({ width: 50, height: 50 })
])
.blur(2)
.shadow({ radius: 8 })