带有 Swift UI 的 MacOS 应用程序的边栏、画布、检查器

Question

谁能指出我使用 Swift UI 在 Xcode 中创建 MacOS 应用程序的正确方向？

我特别希望制作具有侧边栏、画布和检查器的东西，并带有显示/隐藏这些视图的按钮。出于概念目的，想想 iTunes 的左侧（导航）和右侧（下一个播放和历史记录）以及内容（如库项目或商店项目等）的方式。

这是我能得到的最接近的，但它与“检查器”一侧不太正确，因为文本只是淡入和淡出，实际上并没有随着视图移动。左侧发生的只是文本淡入和淡出。

import SwiftUI
import CoreData

struct ContentView: View {
@Environment(\.managedObjectContext) private var viewContext

@FetchRequest(
    sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
    animation: .default)
private var items: FetchedResults<Item>

@State private var isPresented = false

// Track the currently selected item
@State private var selectedItem: Item?

// Track the visibility of the "select an item" view
@State private var showSelectionView = true

@State private var isHidden = false
@State private var isHidden2 = false

var body: some View {
    
    NavigationView {
        if !isHidden2 {
            List {
                //MARK: Section 1
                Section("Section 1") {
                    ForEach(items) { item in
                        NavigationLink {
                            Text("Item at \(item.timestamp!, formatter: itemFormatter)")
                        } label: {
                            Text(item.timestamp!, formatter: itemFormatter)
                        }
                        
                    }
                    .onDelete(perform: deleteItems)
                }
                
                //MARK: Section 2
                Section("Section 2"){
                    Label("Write", systemImage: "list.bullet.clipboard")
                    ForEach(items) { item in
                        NavigationLink {
                            Text("Item at \(item.timestamp!, formatter: itemFormatter)")
                        } label: {
                            Text(item.timestamp!, formatter: itemFormatter)
                        }
                        
                    }
                    .onDelete(perform: deleteItems)
                }
            }
            // Button that addsd a new tdate/ime for CoreData
            .toolbar {
                ToolbarItem {
                    Button(action: addItem) {
                        Label("Add Item", systemImage: "plus")
                    }
                }
            }
            
            
            
            .sheet(isPresented: $isPresented) {
                List {
                    ForEach(items) { item in
                        NavigationLink {
                            Text("Item at \(item.timestamp!, formatter: itemFormatter)")
                        } label: {
                            Text(item.timestamp!, formatter: itemFormatter)
                        }
                    }
                    .onDelete(perform: deleteItems)
                }
            }
            // Text("Select an item")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color(.windowBackgroundColor))
            .animation(.default, value: showSelectionView)
        }

        
        
        
//MARK: Main area
        if showSelectionView {
            HStack {
                VStack{
                    List {
                        Text("Place Holder")
                        Text("Place Holder")
                        Text("Place Holder")
                        
 //MARK: Shows data from CoreData in center area
                    /*    ForEach(items) { item in
                            NavigationLink {
                                Text("Item at \(item.timestamp!, formatter: itemFormatter)")
                            } label: {
                                Text(item.timestamp!, formatter: itemFormatter)
                            }
                        } */
                    //    .onDelete(perform: deleteItems)
                    }
                    
                    Spacer()
                }
 //MARK: Right side list view
                if !isHidden {
           //         Text("Hello World")
                    List {
                        ForEach(items) { item in
                            NavigationLink {
                                Text("Item at \(item.timestamp!, formatter: itemFormatter)")
                            } label: {
                                Text(item.timestamp!, formatter: itemFormatter)
                            }
                        }
                        .onDelete(perform: deleteItems)
                    }
                    
                    
                 //Set the width of the right side list
                    .frame(width: 200)
        //            Spacer()
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Color(.windowBackgroundColor))
            .animation(.default, value: showSelectionView) // Added line for animation
//MARK: Bullet list button that toggles right side, with animation
            .toolbar {
                ToolbarItem {
                    Button(action: { withAnimation {
                        isHidden.toggle()
                    }
                               }) {
                                   Image(systemName: "list.bullet")
      
                    }
                    
                }
            }
            .toolbar {
                ToolbarItem {
                    Button(action: { withAnimation {
                        isHidden2.toggle()
                    }
                               }) {
                                   Image(systemName: "sidebar.left")
      
                    }
                    
                }
            }
        }
    }
    
}

private func addItem() {
    withAnimation {
        let newItem = Item(context: viewContext)
        newItem.timestamp = Date()
        
        do {
            try viewContext.save()
        } catch {
            let nsError = error as NSError
            fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
        }
    }
}

private func deleteItems(offsets: IndexSet) {
    withAnimation {
        offsets.map { items[$0] }.forEach(viewContext.delete)
        
        do {
            try viewContext.save()
        } catch {
            let nsError = error as NSError
            fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
        }
    }
}
}

private let itemFormatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateStyle = .short
formatter.timeStyle = .medium
return formatter
}()

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
    ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
}
}