HomeiOS Developmentios - How do you get a ConcentricRectangle to respect the machine...

ios – How do you get a ConcentricRectangle to respect the machine 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 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)

Screenshot

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)

Screenshot

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?

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments