ios – Modifying the background of views constructed with NavigationStack and Lists in SwitfUI

NavigationtStack, mixed with Lists and Sections makes constructing a local UI very simple in SwiftUI. Taking a look at Apple’s personal apps there are particular bits of aptitude which I’m trying to obtain in my very own app. Particularly by including a background to the general structure.

For reference, listed here are 3 of Apple’s personal apps with backgrounds behind what seems to be constructed with NavigationStack. Whenever you scroll down the web page, the title shrinks to the small navigation bar.

The Apple Well being app has a bloom/gradient backdrop that’s static till a sure portion of the web page has scrolled.

The Apple Sports activities app has a brief gradient that doesn’t seem to stay static in any respect (however arduous to inform).

The Apple House app has a picture that could be a backdrop to the complete app.

What I’ve discovered with SwiftUI is that I can particularly change the color of the navigation title space, both when proven in its entirety or when collapsed. This selection solely permits a strong color, gradients or photographs can’t be utilized.

When utilizing ZStack I can stack a gradient behind the title part, nevertheless it then seems above the collapsed title when scrolling.

Attempting to stack a rectangle and positioning greater up causes a visual separation between the rectangle and the next content material (Record in my case) which breaks the circulation. The instance beneath places a rectangle with a gradient which is adopted by a transparent break earlier than the NavigationStack is present. Utilizing the place modifier solely re-positions the rectangle in its personal area.

Rectangle()
    .fill(LinearGradient(
        gradient: .init(colours: [.red, .blue]),
        startPoint: .init(x: 0, y: 0),
        endPoint: .init(x: 0, y: 1)
    ))
    .ignoresSafeArea()
    .body(peak: 50)
NavigationStack {
    Record {
        Part("", content material: {
            Textual content("First Merchandise")
        })
    }
    .toolbar {
        Button("Add") {}
    }
    .navigationTitle("Web page Take a look at")
    .toolbarBackground(.pink, for: .navigationBar)
    .toolbarBackground(.seen, for: .navigationBar)
    .toolbarColorScheme(.darkish, for: .navigationBar)
}

That is the output of the code:

The reply to the same query factors to putting ScrollView contained in the Navigation Stack I encounter the identical difficulty, simply that the rectangle and Record every take half of the display screen and the NavigationStack title now sits on prime of all the pieces.

If I take the identical code and wrap it in ScrollView as a substitute, that causes the NavigationStack to seem off display screen and it is inaccessible so that you’re left with a gradient on a clean display screen.

Wrapping with ZStack as a substitute causes the gradient to be hidden behind the default background color of the view. Rearranging so the rectangle is second causes it to take a seat above all the pieces beneath it.

Given the examples from Apple above, how will you customise a SwiftUI view that makes use of NavigationStack with both an outlined color, gradient or picture as a background?