Toolbar primaryAction on watchOS

Question

Created May ’21

Replies 1

Boosts 0

Views 2.7k

Participants 2

I am trying to figure out how to hide the primaryAction ToolbarItem under the navigation bar in a watchOS app written in SwiftUI. I feel like I've followed the documentation but the toolbar item displays without scrolling the view. What is the correct way to show a discoverable toolbar item when the user scrolls up?

Apple's documentation states

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

Toolbar Placement - primaryAction

Here is the view that I am using:

Code Block 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

Boost

Answer 1

bobcine OP

Jul ’21

After tinkering the last few weeks trying to get this to work myself, I discovered that toolbar items in WatchOS require the: .navigationTitle("Navigation") in a very specific place. In your code, it should look like this:

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

Navigation Titles do have to be attached to the inner view, and for some reason the Toolbar Item won't be automatically hidden unless the navigationTitle is present. I'm confident this should work for you since we have similar view hierarchy in our code.

A sidenote: The toolbar behavior doesn't seem to render properly in the canvas in XCode 12.5.1. I had to build and run the app directly on my Apple Watch in order to see the behavior. When the debugger launches, the toolbar will not be hidden. But when the debugger is detached from the watch and the app is running on its own, the behavior is as expected from the HIG.

0