简体   繁体   中英

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()
    }
}

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())
    }
}

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)
            }
    }
}

This way is simpler and will help some people.

.toolbar {
      ToolbarItem(id: UUID().uuidString, placement: .bottomBar, showsByDefault: true) {
            AssetToolbarView(selectedCount: 0)
      }        
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM