用 SwiftUI 2.0 中的工具栏替换 Tabbar答案

【问题标题】：replace Tabbar with toolbar in SwiiftUI 2.0用 SwiftUI 2.0 中的工具栏替换 Tabbar
【发布时间】：2021-01-14 04:53:55
【问题描述】：

我正在尝试复制 iOS 照片应用的行为。

到目前为止，我想不通的是选择模式，当我按下按钮选择时，我如何更改底栏？

在这个视图中，我的意图是：

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

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

主视图的代码类似

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

我正在使用 Xcode 12 和 swiftUI 2.0

【问题讨论】：

标签： ios swift swiftui xcode12 swiftui-navigationlink

【解决方案1】：

首先我们需要像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

【讨论】：