在 SwiftUI 中折叠边栏 (Xcode 12)

Question

我正在尝试利用 SwiftUI 2.0 的新多平台项目模板在 SwiftUI 中做一个简单的应用程序，我希望像许多其他应用程序一样添加折叠边栏的选项。

我尝试添加一个布尔状态变量来控制侧边栏是否应该显示，但这不起作用，因为主视图变成半透明的（我猜这是因为 macOS 认为侧边栏现在是主视图查看）。

有没有办法在 SwiftUI 中实现这一点？ 请注意，我使用的是 macOS Big Sur、Xcode 12 和 SwiftUI 2.0

提前致谢。

我的代码

ContentView.swift

import SwiftUI

struct ContentView: View {

    #if os(iOS)
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    #endif
    
    @ViewBuilder var body: some View {
        #if os(iOS)
        if horizontalSizeClass == .compact {
            TabController()
        } else {
            SidebarNavigation()
        }
        #else
        SidebarNavigation()
            .frame(minWidth: 900, maxWidth: .infinity, minHeight: 500, maxHeight: .infinity)
        #endif
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewLayout(.sizeThatFits)
    }
}

Sidebar.swift

import SwiftUI

struct SidebarNavigation: View {
    
    enum HyperspaceViews {
        case home
        case localTimeline
        case publicTimeline
        case messages
        case announcements
        case community
        case recommended
        case profile
    }

    @State var selection: Set<HyperspaceViews> = [.home]
    @State var searchText: String = ""
    @State var showComposeTootView: Bool = false
    @State var showNotifications: Bool = false
    @State private var showCancelButton: Bool = false
    
    
    var sidebar: some View {
        
        VStack {
            
            HStack {
                TextField("Search...", text: $searchText)
                    .cornerRadius(4)
            }
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
            List(selection: self.$selection) {
                    
                Group {
                    
                    NavigationLink(destination: Timeline().container.frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Home", systemImage: "house")
                    }
                        .accessibility(label: Text("Home"))
                        .tag(HyperspaceViews.home)
                    
                    NavigationLink(destination: Text("Local").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Local", systemImage: "person.2")
                    }
                        .accessibility(label: Text("Local"))
                        .tag(HyperspaceViews.localTimeline)
                    
                    NavigationLink(destination: Text("Public").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Public", systemImage: "globe")
                    }
                        .accessibility(label: Text("Public"))
                        .tag(HyperspaceViews.localTimeline)
                    
                    NavigationLink(destination: Text("Messages").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Messages", systemImage: "bubble.right")
                    }
                        .accessibility(label: Text("Message"))
                        .tag(HyperspaceViews.localTimeline)
                    
                    Divider()
                        
                    NavigationLink(destination: Text("Announcements").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Announcements", systemImage: "megaphone")
                    }
                        .accessibility(label: Text("Announcements"))
                        .tag(HyperspaceViews.announcements)
                    
                    NavigationLink(destination: Text("Community").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Community", systemImage: "flame")
                    }
                        .accessibility(label: Text("Community"))
                        .tag(HyperspaceViews.community)
                    
                    NavigationLink(destination: Text("Recommended").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("Recommended", systemImage: "star")
                    }
                        .accessibility(label: Text("Community"))
                        .tag(HyperspaceViews.recommended)
                    
                    Divider()
                    NavigationLink(destination: Text("Recommended").frame(maxWidth: .infinity, maxHeight: .infinity)) {
                        Label("hyperspacedev", systemImage: "tag")
                    }
                        .accessibility(label: Text("Community"))
                        .tag(HyperspaceViews.recommended)
                        
                }
                
            }
                .overlay(self.profileButton, alignment: .bottom)
            .listStyle(SidebarListStyle())
            
        }
    }
    
    var profileButton: some View {
        VStack(alignment: .leading, spacing: 0) {
            Divider()
            NavigationLink(destination: ProfileView().container.frame(maxWidth: .infinity, maxHeight: .infinity)) {
                HStack {
                    Image("amodrono")
                        .resizable()
                        .clipShape(Circle())
                        .frame(width: 25, height: 25)
                    Text("amodrono")
                        .font(.headline)
                }
                .contentShape(Rectangle())
            }
            .accessibility(label: Text("Your profile"))
            .padding(.vertical, 8)
            .padding(.horizontal, 16)
            .buttonStyle(PlainButtonStyle())
        }
            .tag(HyperspaceViews.profile)
    }
    
    var body: some View {
        NavigationView {
            
            #if os(macOS)
            sidebar.frame(minWidth: 100, idealWidth: 180, maxWidth: 200, maxHeight: .infinity)
            #else
            sidebar
            #endif
            
            Text("Content List")
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            
        }
            .sheet(isPresented: self.$showComposeTootView) {
                ComposeTootView(showComposeTootView: self.$showComposeTootView)
                    .frame(minWidth: 400, maxWidth: .infinity, minHeight: 200, maxHeight: .infinity)
            }

            .toolbar {
                
                ToolbarItem {
                    
                    Button(action: {
                        
                        self.showNotifications.toggle()
                        
                    }) {
                        
                        Image(systemName: "bell")
                        
                    }
                        .popover(
                            isPresented: self.$showNotifications,
                            arrowEdge: .bottom
                        ) {
                            LazyVStack {
                                ForEach(0 ..< 10 ) { i in
                                    
                                    Label("@\(i) liked your post!", systemImage: "hand.thumbsup")
                                        .padding()
                                    
                                    Divider()
                                    
                                }
                            }
                        }
                    
                }
                
                ToolbarItem {
                    
                    Button(action: {
                        
                        self.showComposeTootView.toggle()
                        
                    }) {
                        
                        Image(systemName: "square.and.pencil")
                        
                    }
                }
                
             }
    }
    
}

struct SidebarNavigation_Previews: PreviewProvider {
    static var previews: some View {
        SidebarNavigation()
    }
}

Answer 1

Apple 提供 NSToolbarToggleSidebarItemIdentifier 执行 toggleSidebar(_:) 方法。

.onAppear {
    NSApp.keyWindow?.toolbar?.insertItem(withItemIdentifier: .toggleSidebar, at: 0)
}

这种方式会在您的工具栏中出现一个按钮，该操作将调用侧边栏切换，并且效果很好。

Answer 2

这对我有用 - https://developer.apple.com/forums/thread/651807

struct SwiftUIView: View {
    var body: some View {
        NavigationView{

        }.toolbar {
            ToolbarItem(placement: .navigation) {
                Button(action: toggleSidebar, label: {
                    Image(systemName: "sidebar.left")
                })
            }
        }
    }
}

func toggleSidebar() {
        NSApp.keyWindow?.firstResponder?.tryToPerform(#selector(NSSplitViewController.toggleSidebar(_:)), with: nil)
}

struct SwiftUIView_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView()
    }
}

它显示在 iOS 上的视图中，因此您只需要 macOS 的一些条件。

在 SwiftUI 中折叠边栏 (Xcode 12)

Collapse sidebar in SwiftUI (Xcode 12)

swift

macos

swiftui

sidebar