How to group views visually using GroupBox
Updated for Xcode 13.0
Updated in iOS 15
SwiftUI’s GroupBox view groups views together and places a light background color behind them so they stand out. You can optionally also include a header to make group titles, if you need to.
By default GroupBox with align its views vertically. For example, this will show three text views one above the other:
GroupBox {
Text("Your account")
.font(.headline)
Text("Username: tswift89")
Text("City: Nashville")
}
Download this as an Xcode project
If you want to control that layout, such as changing axis or adjusting the alignment, create a stack yourself:
GroupBox {
VStack(alignment: .leading) {
Text("Your account")
.font(.headline)
Text("Username: tswift89")
Text("City: Nashville")
}
} Download this as an Xcode project
One real power feature of GroupBox is that if you nest them they will automatically adapt their colors so they are neatly distinguished:
GroupBox {
Text("Outer Content")
GroupBox {
Text("Middle Content")
GroupBox {
Text("Inner Content")
}
}
} Download this as an Xcode project
This effect works just as well – if not better! – in dark mode.
Like I said, you can add titles to your GroupBox and although it looks okay on macOS it doesn’t look nice at all on iOS:
GroupBox("Your account") {
VStack(alignment: .leading) {
Text("Username: tswift89")
Text("City: Nashville")
}
} Download this as an Xcode project
SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
