#swift #swiftui #sidebar #catalyst #mac-catalyst
#swift #swiftui #боковая панель #катализатор #mac-catalyst
Вопрос:
Я включил Mac Catalyst
для iPad App
и столкнулся со странным Display Problem
Sidebar
.
Код:
@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()
}
Вопрос: Этот код выдает a Standard Sidebar
на iPad
, однако, как вы можете видеть, Mac Version
это выглядит странно angular design
. Как я могу добиться Standard macOS Sidebar Design
?
Ответ №1:
У меня была такая же проблема.
Оказывается, встроенный SidebarListStyle некорректно работает в macOS.
Вот предлагаемое Стивеном Троутоном-Смитом решение, которое подразумевает перенос ваших представлений SwiftUI в 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) { }
}
Тогда вы сможете вызвать ее как :
struct ContentView: View {
var body: some View {
SidebarSplitView {
Sidebar() // here goes your sidebar
MainView() // here your main view
}
}
}