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 specific bits of aptitude which I’m seeking to obtain in my very own app. Particularly by including a background to the general format.

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.

Cropped screenshot of the Apple Health App

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

Cropped screenshot of Apple Sports

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

Cropped screenshot of the Apple Home app

The Apple Dwelling app has a picture that could be a backdrop to your entire 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 pictures can’t be utilized.

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

Attempting to stack a rectangle and positioning larger up causes a visual separation between the rectangle and the next content material (Checklist in my case) which breaks the movement. 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.

        gradient: .init(colours: [.red, .blue]),
        startPoint: .init(x: 0, y: 0),
        endPoint: .init(x: 0, y: 1)
    .body(top: 50)
NavigationStack {
    Checklist {
        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:

Screenshot of vertically stacked elements in a Swift Playgrounds preview

The reply to an identical query factors to putting ScrollView contained in the Navigation Stack I encounter the identical challenge, simply that the rectangle and Checklist every take half of the display screen and the NavigationStack title now sits on prime of the whole lot.

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.

Screenshot of predominantly blank Swift Playground preview

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 the whole lot beneath it.

Screenshot of items stacked on top of each other in a Swift Playgrounds preview

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?