SwiftUI &Mac Catalyst:侧边栏显示不正确 [英] SwiftUI & Mac Catalyst: Sidebar is not displayed correctly

问题描述

我为 iPad 应用程序 启用了 Mac Catalyst，但遇到了 Sidebar 的奇怪 Display Problem.代码:

I enabled Mac Catalyst for an iPad App and encountered an strange Display Problem of the Sidebar. Code:

@State private var selection: NavigationItem? = .start

NavigationView {
    List(selection: $selection) {
        NavigationLink(destination: StartView(), tag: NavigationItem.start, selection: $selection) {
                Label("Start", systemImage: "square.grid.2x2.fill")
                    .accessibility(label: Text("Start"))
            }
            .tag(NavigationItem.start)

        // 4 more Items
    }
    .listStyle(SidebarListStyle())
    .navigationBarTitle("Impfpass+")
        
    StartView()
}

问题:此代码在 iPad 上生成标准边栏，但是，如您所见，Mac 版本 这个 angular design 看起来很奇怪.如何实现标准 macOS 侧边栏设计?

Question: This Code produces a Standard Sidebar on the iPad, however, as you can see, the Mac Version is looking strange with this angular design. How can I achieve the Standard macOS Sidebar Design?

推荐答案

我遇到了同样的问题.

结果是内置的 SidebarListStyle 在 macOS 上运行不正确.

Turns out the built-in SidebarListStyle does not behave correctly on macOS.

这里是 Steven Troughton-Smith 建议的解决方案，它意味着将 SwiftUI 视图包装在 UISplitViewController 中.

Here is a suggested solution by Steven Troughton-Smith that implies wrapping your SwiftUI views in a UISplitViewController.

基本上:

struct SidebarSplitView: View, UIViewControllerRepresentable {
    typealias UIViewControllerType = UISplitViewController
    let splitViewController = UISplitViewController(style: .doubleColumn)
    
    var columnA = UIViewController()
    var columnB = UIViewController()
    
    init<A:View, B:View>(@ViewBuilder content: @escaping () -> TupleView <(A,B)>) {
        let content = content()
        columnA = UIHostingController(rootView: content.value.0)
        columnB = UIHostingController(rootView: content.value.1)
        columnA.view.backgroundColor = .clear
        columnB.view.backgroundColor = .clear
        splitViewController.viewControllers = [columnA, columnB]
    }
    
    func makeUIViewController(context: Context) -> UIViewControllerType {
        splitViewController.primaryBackgroundStyle = .sidebar
        return splitViewController
    }
    
    func updateUIViewController(_ uiView: UIViewControllerType, context: Context) { }
}

然后你就可以把它称为:

Then you would be able to call it as :

struct ContentView: View {
    var body: some View {
        SidebarSplitView {
            Sidebar()   // here goes your sidebar
            MainView()  // here your main view
        }
    }
}

这篇关于SwiftUI &Mac Catalyst:侧边栏显示不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！