This query is about ConcentricRectangle
. First, some background:
The SwiftUI Form
ContainerRelativeShape
has existed since iOS 14. In iOS 26, it appears to respect the form of the machine display. So the next code reveals a grey background behind the content material with good concentric corners:
VStack {
Textual content("Content material")
.body(maxWidth: .infinity, maxHeight: .infinity)
}
.background(.quaternary, in: .containerRelative)
.padding(20)
Btw, the corners are solely rounded when operating with iOS 26. Once I tried it on an iPhone 16 simulator operating iOS 18.5, the corners had been sq..
In iOS 26, the brand new Form
ConcentricRectangle
has been launched. Nonetheless, when used as the form for the background within the code above, the corners are sq.:
VStack {
Textual content("Content material")
.body(maxWidth: .infinity, maxHeight: .infinity)
}
.background(.quaternary, in: .rect(corners: .concentric)) // 👈 modified
.padding(20)
The documentation states:
To make use of ConcentricRectangle, first be sure that the ancestor view hierarchy gives the container form. Some container shapes are supplied by platform kits, however you can present your personal by writing the containerShape(_:) modifier with a form.
OK, so lets strive .containerRelative
because the container form:
VStack {
Textual content("Content material")
.body(maxWidth: .infinity, maxHeight: .infinity)
}
.background(.quaternary, in: .rect(corners: .concentric))
.padding(20)
.containerShape(.containerRelative) // 👈 added
Sadly, this does not work both and the corners are nonetheless sq..
If I knew the radius of the machine corners then I may specify the container form as a RoundedRectangle
. I may additionally provide a minimal radius as a fallback. However certainly, neither of those workarounds needs to be crucial – in spite of everything, it labored within the first instance the place the background form was .containerRelative
.
How do you get a ConcentricRectangle to respect the machine corners, with out having to inform it what these are?