在 SwiftUI (Xcode 12) 中折叠侧边栏

Posted 2023-02-24

【中文标题】在 SwiftUI (Xcode 12) 中折叠侧边栏

【英文标题】：Collapse sidebar in SwiftUI (Xcode 12)

【发布时间】：2020-06-25 14:02:34

【问题描述】：

我正在尝试利用 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()
    

【问题讨论】：

我在尝试重新启用侧边栏时遇到问题？？我将它添加到我的 Mac 应用程序中。折叠它进行测试，现在我无法在我的模拟器中取回它？

【参考方案1】：

这对我有用 - 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 的一些条件。

【讨论】：

是的，我也看到了，我是那个问题的作者，哈哈，但还是谢谢！ :D

那么谢谢你！不知道有多少次我丢失了侧边栏并努力找回它，直到我找到那个帖子。

下次，如果您忘记实现按钮，并且丢失了侧边栏，您可以通过从Library/Application Support 中删除应用程序的配置文件来找回它。

谢谢，太浪费时间了，我不得不花 20 分钟来弄清楚我做错了什么。

这在 Catalyst 中不起作用，但 NSSplitViewController.toggleSidebar 不可用。对 Catalyst 有什么想法吗？

【参考方案2】：

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

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

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