如何在 SwiftUI 中创建共享导航栏以在多个视图之间进行交互？ [关闭]

Posted 2023-02-23

【中文标题】如何在 SwiftUI 中创建共享导航栏以在多个视图之间进行交互？ [关闭]

【英文标题】：How to create a shared navigation bar to inter-navigate among multiple views in SwiftUI? [closed]

【发布时间】：2021-11-26 18:52:32

【问题描述】：

我想通过点击每个屏幕底部共享导航栏中的相应按钮在屏幕 A、B 和 C 之间导航。如何创建这样的工具栏来实现屏幕之间的这种可导航性？

【参考方案1】：

您将使用TabView ... 来完成此操作。实际上，您在 TabView 中实例化您的视图，然后为每个视图添加一个项目修饰符。

var body: some View 
    TabView 
        Text("A")
            .tabItem  Text("A") 
        Text("B")
            .tabItem  Text("B") 
        Text("C")
            .tabItem  Text("C") 
    


    init() 
        UITabBar.appearance().backgroundColor = UIColor.red
    

这段代码的作用：https://i.stack.imgur.com/CKBHm.gif

为了更加清晰，您可以将任何您想要的项目添加到 TabView。它基本上充当您添加的视图的容器。

struct ContentView: View 
    var body: some View 
        TabView 
            FirstView()
                .tabItem  Text("A") 
            SecondView()
                .tabItem  Text("B") 
            ThirdView()
                .tabItem  Text("C") 
        
    


struct FirstView: View 
    var body: some View 
        Text("A")
    


struct SecondView: View 
    var body: some View 
        Text("B")
    


struct ThirdView: View 
    var body: some View 
        Text("C")
    

自定义标签栏

这是一个非常简单的案例，我们只需根据我们创建的枚举换出父 VStack。当它第一次初始化时，这将设置.first 页面，这将是显示的页面。每当我们使用位于HStack 中的按钮操作更改它时，视图都会更新。如果您想向标签栏添加文本或图像之外的更多内容，这将特别有用。您还可以将selectedPage 添加到@EnvironmentObject 以从应用程序的任何位置控制这些页面。在创建需要交换导航堆栈的登录或登录页面时，它特别有用。

struct ContentView: View 
    @State var selectedPage: SelectedPage = .first
    
    var body: some View 
        VStack 
            VStack 
                switch selectedPage 
                case .first:
                    FirstView()
                case .second:
                    SecondView()
                case .third:
                    ThirdView()
                
            
            
            Spacer()
            
            HStack 
                Button(action:  selectedPage = .first , label: 
                    Text("A")
                )
                
                Spacer()
                
                Button(action:  selectedPage = .second , label: 
                    Text("B")
                )
                
                Spacer()
                
                Button(action:  selectedPage = .third , label: 
                    Text("C")
                )
            .padding(.horizontal, 30)
        
    


enum SelectedPage 
    case first, second, third

【讨论】：

感谢您的回复。在现实中，视图 A、B 和 C 将是与用户交互的主页、设置和配置文件屏幕，每个屏幕都有自己的按钮。但是，TabView 似乎仅限于只能接受图像和文本视图的选项卡，而不是按钮等。对于在更复杂的视图之间实现导航有什么想法吗？

所以你想要一个自定义的标签栏，不一定是原生的？我也可以告诉你如何做到这一点。给我一些来建造它。我要去吃午饭了。

@cbusch 每个选项卡的内容视图可以是您想要的任何 SwiftUI 视图集合。标签栏本身只有文本和用于选择标签的图标。

@Paulw11 太棒了，感谢您指出这一点。如何修改 TabView 的背景？我想将选项卡按钮包装在彩色框架中，但是在 TabView 上调用的 .background(Color.black) 修饰符无法将其背景渲染为黑色。

@cbusch 你去：D