SwiftUI 中 macOS 的侧边栏菜单 [英] Sidebar Menu for macOS in SwiftUI

问题描述

我正在尝试实现一个菜单，到目前为止是这样的:

I'm trying to implement a menu, so far this is what have:

导航视图

struct macOS_NavigationView: View {
    
    @State private var selectedTab: HostingBarCategories = .Screen1
    
    var body: some View {

        NavigationView {
            // SideBar Menu
            List {
                ForEach(1 ... 10, id: \.self) { index in
                    NavigationLink(destination:
                                    Text("\(index)")
                                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    ) {
                        Text("Link \(index)")
                    }
                }
            }
            .listStyle(SidebarListStyle())
            
            // Primary View
            Text("Select a menu...")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

我被卡住的部分是尝试在 TabBar 中实现我用于 iOS 的当前模型:

The part where I'm stuck is trying to implement my current model that I'm using for iOS in the TabBar:

HostingBarCategories

enum HostingBarCategories: Hashable {
    case Screen1
    case Screen2
    case Screen3
    case Screen4
    case Screen5
}

那么我如何使用该模型，以便当用户单击菜单时它会转到该屏幕?(模型可以扩展，不一定是那个)

So how can I use that model so when a user clicks a menu it goes to that screen? (the model can be expanded, it doesn't have to be that one specifically)

让我添加当前的iOS TabBar，以便在视觉上更容易理解，这仅供参考，与问题无关:

Let me add the current iOS TabBar so it's more visually understandable, this is just for reference for the above and has nothing to do with the question:

struct iOS_TabBarView: View {
    
    @State private var selectedTab: HostingBarCategories = .Screen1
    
    var body: some View {
        TabView(selection: $selectedTab) {
            Text("1")
                .tag(0)
                .tabItem {
                    Image(systemName: "pencil.and.outline")
                    Text("1")
                }
            Text("2")
                .tag(1)
                .tabItem {
                    Image(systemName: "checkmark")
                    Text("2")
                }
            Text("3")
                .tag(2)
                .tabItem {
                    Image(systemName: "calendar.circle.fill")
                    Text("3")
                }
            Text("4")
                .tag(3)
                .tabItem {
                    Image(systemName: "flame")
                    Text("4")
                }
            Text("5")
                .tag(3)
                .tabItem {
                    Image(systemName: "slider.horizontal.3")
                    Text("5")
                }
        }
    }
}

推荐答案

你需要让你的 enum case-iterable 将它用作 ForEach 中的模型，比如

You need to make your enum case-iterable to use it as model in ForEach, like

enum HostingBarCategories: Hashable, CaseIterable {
    case Screen1
    case Screen2
    case Screen3
    case Screen4
    case Screen5
    
    var string: String { String(describing: self) }
}

struct macOS_NavigationView: View {
    
    @State private var selectedTab: HostingBarCategories = .Screen1
    
    var body: some View {

        NavigationView {
            // SideBar Menu
            List {
                ForEach(HostingBarCategories.allCases, id: \.self) { screen in
                    NavigationLink(destination:
                                    Text(screen.string)
                                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    ) {
                        Text("Link \(screen.string)")
                    }
                }
            }
            .listStyle(SidebarListStyle())
            
            // Primary View
            Text("Select a menu...")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

这篇关于SwiftUI 中 macOS 的侧边栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！