When should you use ContainerRelativeShape?
Updated for Xcode 13.0
New in iOS 14
SwiftUI has a number of built-in shapes that are self-explanatory, but there’s one that stands out: ContainerRelativeShape. This isn’t a fixed shape, but is instead designed to be an insettable version of whatever shape it’s placed inside, which is particularly important when creating home screen widgets.
Important: At this time, ContainerRelativeShape works only inside widgets. You can use it elsewhere, but it will just make a rectangle.
For example, we could write code that draws a blue shape in our widget, and use ContainerRelativeShape to make sure it’s the same shape as the widget itself:
struct ContentView: View {
var body: some View {
ZStack {
ContainerRelativeShape()
.inset(by: 4)
.fill(Color.blue)
Text("Hello, World!")
.font(.title)
}
.frame(width: 300, height: 200)
.background(Color.red)
.clipShape(Capsule())
}
}
SwiftUI is smart here: as you inset the container shape further and further, it will scale the corner radius of the container so it looks great in your widget.
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…
