Toolbar is appearing at the bottom

Question

Created Jun ’20

Replies 10

Boosts 0

Views 5.4k

Participants 10

I was following along to Introduction to SwiftUI and noticed that the toolbar modifier produced a toolbar visible at the top of the navigation view.

When I tried doing this using the same code, the toolbar is appearing at the bottom. The buttons are also presented in the opposite order as the video.

Code Block swift.toolbar {
	#if os(iOS)
	EditButton()
	#endif
	Button("Add", action: makeSandwich)
}

I was wondering why this is the case?

Boost

Answer 1

mjfigueroa OP

Jun ’20

The same thing is happening to me. I think it may be related to the fact I'm using the Xcode beta on Catalina rather than Big Sur.

0

Answer 2

crawforb OP

Jun ’20

I can confirm it happens in Big Sur Too

0

Answer 3

marrujoalex OP

Jun ’20

Can confirm, this is the same behavior I experienced in the session.

For clarification, I'm using macOS Catalina, Xcode 12 Beta.

0

Answer 4

mjfigueroa OP

Jun ’20

As a workaround, you can wrap the buttons with ToolbarItem(placement:):

Code Block .toolbar {
	#if os(iOS)
	ToolbarItem(placement: .navigationBarTrailing) {
		EditButton()
	}
	#endif
	ToolbarItem(placement: .navigationBarLeading) {
		Button("Add", action: makeSandwich)
	}
}

2

Answer 5

mredig OP

Jun ’20

Happening for me too on Catalina and Big Sur (Catalina, live preview and simulator, Big Sure I was only able to get the simulator to work).

What's also weird is that, with the workaround from @mjfigueroa, the Add button disappears after briefly appearing.

0

Answer 6

decipher21 OP

Jun ’20

Adding an EditButton to the NavigationView

Code Block swift NavigationView {
	List {
		// code here 
	}
	.navigationBarItems(trailing: EditButton()) 
}

0

Answer 7

ardent11 OP

Jun ’20

You can do the above or you can also stick with the new .toolbar modifier and use the ToolBarItem view with a .navigationBarLeading placement.

Something like below:

Code Block .toolbar {
    ToolbarItem(placement: .navigationBarLeading) {
        EditButton()
    }
}

I am running into a bug though where the 'Edit' button randomly disappears when I carry out certain actions like adding a new item to the list. I have filed a bug regarding this.

0

Answer 8

stixleetwo OP

Jul ’20

I ran into this same issue. In the initial Xcode 12 developer Beta it looks like the default placement of tool bar items is at the bottom. To fix this I had to explicitly identify where I wanted the items to go.

Having said that, the Add button disappears when you tap on it (both live preview and simulator). Not sure why this is happening as I can see the code is executing on each body call).

Code Block  .toolbar {
	ToolbarItem(placement: .navigationBarLeading) {
		Button("Add", action: makeSandwich)
	}
	#if os(iOS)
	ToolbarItem(placement: .navigationBarTrailing) {
		EditButton()
	}
	#endif

0

Answer 9

teramitsu OP

Jul ’20

:: the same problem with the "Add" button disappearing after you tap it or the Edit button.
:: the zoom animations don't work if you have more than 1 preview window. fix = comment out the extra ContentView lines.
:: the Back (previous window) button changes from :

<Sandwiches (only appears for sandwich[0]&[1] )
<Back
<

Code Block 	.navigationTitle("Sandwiches")
 	.toolbar {	
		ToolbarItem(placement: .navigationBarLeading) {
			Button("Add", action: makeSandwich)
		}	
		#if os(iOS)	
			ToolbarItem(placement: .navigationBarTrailing) {
			EditButton()
			}	
		#endif
	}

1

Answer 10

KuriiboShoe OP

Jul ’20

I found this answer on StackOverflow regarding setting the background color for a navigation bar in SwiftUI, and the same solution can be used here:

Code Block swift.background(NavigationConfigurator {nc in
		nc.setToolbarHidden(false, animated: false)
})

0