SwiftUI - 3 Column/Sidebar 布局是否全部可见?
SwiftUI - 3 Column/Sidebar Layout with All Visible?
我正在试验 SwiftUI 对多列侧边栏布局的新支持。我知道我可以做这样的事情:
struct SidebarContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0...5, id: \.self) { i in
Text("\(i)")
}
}
.listStyle(SidebarListStyle())
.navigationTitle("List 1")
List {
ForEach(0...5, id: \.self) { i in
Text("\(i)")
}
}
.navigationTitle("List 2")
Text("Hello world")
.font(.largeTitle)
.navigationTitle("Content")
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
创建我的 3 列布局(2 个导航列,然后是一个更大的内容视图),但最初生成的视图如下所示:
我必须点击后退按钮才能使布局看起来像这样:
我真正想要的是所有 3 列同时可见,而不需要点击后退按钮或任何东西,至少当 iPad 处于横向模式时。示例如下所示:
谁能解释一下我如何实现这样的布局?当我的应用程序在 macOS 上运行或在 iPad 横向模式下运行时,我希望它处于活动状态。在纵向模式下,我会喜欢第一个屏幕截图中显示的导航样式,但希望所有窗格都可见。有什么想法吗?
更新:更好的解决方案
extension UISplitViewController {
open override func viewDidLoad() {
super.viewDidLoad()
self.show(.primary)
}
}
===========================
看看这个 github 项目:SwiftUI-Introspect
import Introspect
@main
struct ExampleApp: App {
var body: some Scene {
WindowGroup {
NavigationView {
Text("Primary View")
Text("Supplementary View")
Text("Secondary View")
// show primary view at startup
.introspectSplitViewController(customize: { splitViewController in
splitViewController.show(.primary)
})
}
}
}
}
// Implement UISplitViewControlle selector
extension View {
public func introspectSplitViewController(customize: @escaping (UISplitViewController) -> ()) -> some View {
return inject(UIKitIntrospectionViewController(
selector: { introspectionViewController in
// Search in ancestors
if let splitViewController = introspectionViewController.splitViewController {
return splitViewController
}
// Search in siblings
return Introspect.previousSibling(containing: UISplitViewController.self, from: introspectionViewController)
},
customize: customize
))
}
}
我正在试验 SwiftUI 对多列侧边栏布局的新支持。我知道我可以做这样的事情:
struct SidebarContentView: View {
var body: some View {
NavigationView {
List {
ForEach(0...5, id: \.self) { i in
Text("\(i)")
}
}
.listStyle(SidebarListStyle())
.navigationTitle("List 1")
List {
ForEach(0...5, id: \.self) { i in
Text("\(i)")
}
}
.navigationTitle("List 2")
Text("Hello world")
.font(.largeTitle)
.navigationTitle("Content")
}
.navigationViewStyle(DoubleColumnNavigationViewStyle())
}
}
创建我的 3 列布局(2 个导航列,然后是一个更大的内容视图),但最初生成的视图如下所示:
我必须点击后退按钮才能使布局看起来像这样:
我真正想要的是所有 3 列同时可见,而不需要点击后退按钮或任何东西,至少当 iPad 处于横向模式时。示例如下所示:
谁能解释一下我如何实现这样的布局?当我的应用程序在 macOS 上运行或在 iPad 横向模式下运行时,我希望它处于活动状态。在纵向模式下,我会喜欢第一个屏幕截图中显示的导航样式,但希望所有窗格都可见。有什么想法吗?
更新:更好的解决方案
extension UISplitViewController {
open override func viewDidLoad() {
super.viewDidLoad()
self.show(.primary)
}
}
===========================
看看这个 github 项目:SwiftUI-Introspect
import Introspect
@main
struct ExampleApp: App {
var body: some Scene {
WindowGroup {
NavigationView {
Text("Primary View")
Text("Supplementary View")
Text("Secondary View")
// show primary view at startup
.introspectSplitViewController(customize: { splitViewController in
splitViewController.show(.primary)
})
}
}
}
}
// Implement UISplitViewControlle selector
extension View {
public func introspectSplitViewController(customize: @escaping (UISplitViewController) -> ()) -> some View {
return inject(UIKitIntrospectionViewController(
selector: { introspectionViewController in
// Search in ancestors
if let splitViewController = introspectionViewController.splitViewController {
return splitViewController
}
// Search in siblings
return Introspect.previousSibling(containing: UISplitViewController.self, from: introspectionViewController)
},
customize: customize
))
}
}