ios – How do you get a ConcentricRectangle to respect the system corners, with out having to inform it what these are?

0
1
ios – How do you get a ConcentricRectangle to respect the system corners, with out having to inform it what these are?


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 system display screen. So the next code exhibits 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)

Screenshot

Btw, the corners are solely rounded when working with iOS 26. Once I tried it on an iPhone 16 simulator working 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)

Screenshot

The documentation states:

To make use of ConcentricRectangle, first make certain the ancestor view hierarchy supplies the container form. Some container shapes are offered by platform kits, however you might present your individual by writing the containerShape(_:) modifier with a form.

OK, so lets attempt .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 system corners then I might specify the container form as a RoundedRectangle. I might additionally provide a minimal radius as a fallback. However absolutely, neither of those workarounds needs to be crucial – in any case, it labored within the first instance the place the background form was .containerRelative.

How do you get a ConcentricRectangle to respect the system corners, with out having to inform it what these are?

LEAVE A REPLY

Please enter your comment!
Please enter your name here