swiftui - SwiftUI - 使用自定义视图覆盖 TabView

Question

我有一个带有标签栏导航概念的应用程序。对于一个视图，我目前正在尝试实现一个标签栏覆盖，大家都知道 iOS 中的照片应用程序。它在您选择图像时出现。见下文：

我试图在下面的代码片段中实现这种行为，但我有两个疑问：

• 是.overlay()正确的方法吗？我想将它与一个状态结合起来并相应地设置它以启用/禁用覆盖。
• 如果从编码的角度来看覆盖是可以的，我将如何将它与底部对齐并注意调整大小以使其完全覆盖标签栏？

struct ContentView: View {
    var body: some View {
        TabView {
            
            NavigationView {
                Text("First Nav Page")
            }
            .tabItem {
                Image(systemName: "house")
                Text("Home")
                
            }.tag(0)
            
            NavigationView {
                Text("Second Nav Page")
            }
            .tabItem {
                Image(systemName: "gear")
                Text("Settings")
            }.tag(1)
            
            Text("No Nav Page")
                .tabItem{
                    Image(systemName: "plus")
                    Text("Test")
                }.tag(2)
            
        }.overlay(
            Rectangle()
                .foregroundColor(.red)
                .frame(width: 40, height: 40)
        )
    }
}

谢谢！

标签： swiftuioverlaytabbartabview

Answer 1

您正在寻找的是一个Toolbar，而不是 TabBar。因此当用户在 EditMode 中发生变化时，您将不得不将 TabBar 更改为 Toolbar。

工具栏在 iOS 14 中可用，并采用 ToolbarItem 作为中心的状态和带有图标的前导项目。您应该构建一个将 TabBar 与工具栏交换的函数。

这是您案例的工具栏示例：

struct ContentView: View {
    @State var isSelecting : Bool = false
    
    var body: some View {
        NavigationView {
            Text("Hello World")
                .toolbar {
                    ToolbarItem(placement: .bottomBar, content: {
                            Button(action: {
                                
                            }){
                                Image(systemName: "square.and.arrow.up")
                            }
                        })
                }
                .toolbar {
                    ToolbarItem(placement: .status, content: {
                            Text("Auswählen")
                                .fontWeight(.bold)
                    })
            }
        }
    }
}