'swiftUI bottomBar toolbar disappears when going back
I have these swiftUI views and trying to use the toolbar
(bottomBar). When you launch the app it appears fine, but after going to View2
using he navigationLink and then go back to the main view the toolbar disappears. It happens when the NavigationLink being inside the list. If you don't use a list (put the navigation link inside a VStack or similar) it works as expected and the toolbar reappears when you go back to the initial view. Is there a way to fix this?
import SwiftUI
struct View2: View {
var body: some View {
VStack{
Text("View2")
}
}
}
struct ContentView: View {
var body: some View {
NavigationView{
List{
NavigationLink(destination: View2()) {
Text("go to View2")
}
}
.toolbar(content: {
ToolbarItem(placement: .bottomBar, content: {
Text("toolbar item 1")
})
})
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Solution 1:[1]
Update: Fixed in Xcode 13.3 / iOS 15.4
This is known bug. Here is possible workaround - force refresh on View2 disappeared (tested with Xcode 12.1 / iOS 14.1)
struct ContentView: View {
@State private var refresh = UUID()
var body: some View {
NavigationView{
List{
NavigationLink(destination:
View2().onDisappear { refresh = UUID() }) { // << here !!
Text("go to View2")
}
}
.toolbar(content: {
ToolbarItem(placement: .bottomBar, content: {
Text("toolbar item 1")
})
}).id(refresh) // << here !!
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
Solution 2:[2]
In my case I had to make sure that the toolbar is only visible in View1. To get this working I used a state variable to detect when View1 is viewed to the user.
struct View2: View {
var body: some View {
Text("View2")
}
}
struct View1: View {
@State private var refresh = UUID()
@State var isShown = true
var body: some View {
NavigationView {
List {
NavigationLink(destination:
View2()
.onDisappear(perform: {
if (isShown) {
refresh = UUID()
}
})
.onAppear(perform: { isShown = false })
){
Text("Row1")
}
}
.onAppear(perform: {
isShown = true
})
.toolbar(content: {
ToolbarItem(placement: .bottomBar) {
Button(action: {
// Action
}) {
HStack(spacing: 10) {
Image(systemName: "plus.circle")
Text("Add")
}
}}
})
.id(refresh)
}
}
}
Solution 3:[3]
This way is simpler and will help some people.
.toolbar {
ToolbarItem(id: UUID().uuidString, placement: .bottomBar, showsByDefault: true) {
AssetToolbarView(selectedCount: 0)
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | niklas30 |
Solution 3 | gaohomway |