CODEWITHSUNDEEP
swiftuiwatchos
spig
spig

Reputation: 1715

How do I get a ToolbarItem with primaryAction placement to display under the navigation bar on WatchOS in SwiftUI

I am trying to figure out how to hide the primaryAction ToolbarItem under the navigation bar in a watchOS app written in SwiftUI. Apple's documentation states

In watchOS the system places the primary action beneath the navigation bar; the user reveals the action by scrolling.

ToolbaritemPlacement - primaryAction

Here is the view that I am using:

var body: some View {
    NavigationView {
        ScrollView {
            VStack(alignment: .leading) {
                ForEach(0..<100) {
                    Text("Row \($0)")
                }
            }
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button("Settings") {}
                }
            }
        }
    }
    .navigationTitle("Navigation")
}

The primary action button always displays and is never hidden. I have seen an example where one used a ScrollViewReader to programmatically change the position but I feel like that isn't what Apple has stated is possible and I'm trying to understand what I'm doing wrong. Apple's documentation also states that the toolbar needs to be inside the scrollview:

Place a toolbar button only in a scrolling view. People frequently scroll to the top of a scrolling view, so discovering a toolbar button is almost automatic. Placing a toolbar button in a nonscrolling view makes it permanently visible, eliminating the advantage of hiding it when it’s not needed.

Toolbar Buttons watchOS

Upvotes: 0

Views: 1157

Answers (1)

Bjorn Morrhaye
Bjorn Morrhaye

Reputation: 731

Try this:

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                ForEach(0..<100) {
                    Text("Row \($0)")
                }
            }
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button("Settings") {}
                }
            }
            .navigationTitle {
                Text("Navigation")
            }
        }
    }
}

Upvotes: 1

Related Questions