在SwiftUI中为macOS创建侧边栏菜单

Question

在SwiftUI中为macOS创建侧边栏菜单

4

我正在尝试实现一个菜单，目前已经有以下内容：

NavigationView

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

我卡住的部分是尝试在选项卡栏中实现我目前在iOS上使用的模型: HostingBarCategories

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

那么我如何使用该模型，使得用户点击菜单后可以跳转到该屏幕？（该模型可以扩展，不一定非要使用特定的那一个）

编辑：让我添加当前的iOS TabBar，以便更加直观易懂，这只是对上面内容的参考，与问题无关：

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

- ElKePoN

“我没有理解这部分。是哪个屏幕？当用户点击菜单时，如何使用该模型？ HostingBarCategories 如何与您的视图相关联？即 HostingBarCategories 和你的视图之间应该有什么关系？” - pawello2222

@pawello2222 枚举类型是屏幕（不同的视图），用于标识用户想要去哪里。如果你在 iOS TabBar 中看到，当我点击第一个选项卡（0）时，它将是 .tag(0)，代表枚举类型：Screen1。这有意义吗？还是让你更困惑了？整个重点是使用模型来构建 macOS 的菜单（侧边栏）。 - ElKePoN

我在想如果我点击某个“链接”会发生什么。你的问题是关于当你点击任何链接时更新“selectedTab”吗？ - pawello2222

@pawello2222 当您单击侧边栏截图中的链接之一时，它会带您到任何您想要的地方，这不是问题/疑问。好的，让我们这样来说，您如何实现一个简单的macOS侧边栏，并放置一个可重用的模型（该模型）用于iOS应用程序的TabBar？ - ElKePoN

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asperi · Accepted Answer

如果您想在 ForEach 中使用枚举类型作为模型，您需要使其可迭代，例如：

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