HomeiOS Developmentconstruct a non-sticky toolbar background with sticky title in SwiftUI

construct a non-sticky toolbar background with sticky title in SwiftUI


I’ve taken a liking to some specific apps which have a coloration/background behind their toolbar on the prime of the view, as if to emphasise the navigation titles/headers, however then you may scroll previous it.

I am focusing on iOS 26. That is what I’ve thus far:

struct ContentView: View {
    var physique: some View {
        NavigationStack {
            ScrollView {
                ForEach(0..<50, id: .self) { index in
                    Textual content("(index)")
                }
                .body(maxWidth: .infinity)
            }
            .toolbarBackground(.blue, for: .navigationBar)
            .toolbarBackground(.seen, for: .navigationBar)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Textual content("Title")
                        .fontWeight(.daring)
                        .font(.title2)
                        .fixedSize()
                }
                .sharedBackgroundVisibility(.hidden)
            }
        }
    }
}

which creates a sticky, regular coloured toolbar with a semi-transparent header coloration:

construct a non-sticky toolbar background with sticky title in SwiftUI

I’ve experimented with conditionally setting .toolbarBackground(.seen/.hidden...) to different success, which can also be sticky and simply adjustments the opacity.

That is what I am going for:

slack non-sticky toolbar background

Be aware that the header is purple solely when on the prime of the web page, however fades out slowly, and it additionally has a "onerous" line on the backside that recedes as I scroll upwards.

Does anybody understand how to do that? Within the above instance, nonetheless, it appears to be like like their title can also be non-sticky.

I am open to utilizing UIKit right here too.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments