Replay Tabbar与SwiiftUI 2.0的工具栏

I’m trying replicate the behavior of iOS Photos app.

Till now the thing I can’t figure how could be done is the 选择模式,当我按下按钮时选择我可以改变底部栏吗?

植物上,我打算的是,在这个视图中:

enter image description here

当我按下按钮时,底部条更改为:

enter image description here

在实际项目中,视图嵌入导航视图内

主视图的代码类似于

struct ContentView: View {
    
    var body: some View {
        NavigationView{
            
            TabView{
                data()
                    .tabItem {
                        Text("Data")
                    }
                
                data2()
                    .tabItem {
                        Text("Data")
                    }
            }
        }
    }

i’m使用Xcode 12和Swiftui 2.0

回答 1

  1. 赞同 0

    我们需要这样的条件修改器https://stackoverflow.com/a/61253769/2715636

    struct conditionalModifier: ViewModifier {
    var isShowing: Bool
    func body(content: Content) -> some View {
        Group {
            if self.isShowing {
                content
                    .toolbar {
                        ToolbarItem(placement: .bottomBar, content: {
                            Button(action: {
                                
                            }){
                                Image(systemName: "square.and.arrow.up")
                            }
                        })
                    }
                    .toolbar {
                        ToolbarItem(placement: .status, content: {
                            Text("Toolbar")
                                .fontWeight(.bold)
                        })
                    }
            }
        }
    }}
    

    我不需要否则声明原因我只想看到工具栏

    else { content }
    

    And here is my Tabbar inside ZStack. We're gonna overlay it with Text using Conditional modifier applied to Text

    struct ContentView: View {
    @State private var showToolbar: Bool = false
    var body: some View {
        Button(action: {
            showToolbar.toggle()
        }, label: {
            Text(showToolbar ? "Show Tabbar" : "Show Toolbar")
        }).padding()
        ZStack {
            TabView {
                someView()
                    .tabItem {
                        Image(systemName: "placeholdertext.fill")
                        Text("Tab 1")
                    }
                
                someView()
                    .tabItem {
                        Image(systemName: "placeholdertext.fill")
                        Text("Tab ")
                    }
                
                someView()
                    .tabItem {
                        Image(systemName: "placeholdertext.fill")
                        Text("Tab 3")
                    }
            }
            
            Text("")
                .modifier(conditionalModifier(isShowing: showToolbar))
            
        }
    }}
    

    Final结果Tabbar到工具栏

    anthone justt