用SwiiftUI 2.0中的工具栏替换Tabbar

如何解决用SwiiftUI 2.0中的工具栏替换Tabbar

我正在尝试复制iOS Photos应用程序的行为。

到目前为止，我仍无法确定怎么做的是选择模式，当我按下 select 按钮时，如何更改底部的栏？

在这种情况下，我的意图是图形化的：

当我按下按钮时，底部栏变为：

在实际项目中，视图被嵌入到NavigationView中

主视图的代码类似于

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

我正在使用Xcode 12和swiftUI 2.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 语句，因为我只想看到工具栏

else { content }

这是我在 ZStack 中的 Tabbar。我们将使用应用于文本的条件修饰符将其与文本叠加

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

最终结果 tabbar to toolbar