d2be634870
Add fourteen skills from Dimillian/Skills, integrate the merged Snowflake and WordPress updates into the maintainer sync, and refresh registry metadata, attributions, walkthrough notes, and the 8.9.0 release notes while keeping validation warnings within budget.
73 lines
2.0 KiB
Markdown
73 lines
2.0 KiB
Markdown
# Split views and columns
|
|
|
|
## Intent
|
|
|
|
Provide a lightweight, customizable multi-column layout for iPad/macOS without relying on `NavigationSplitView`.
|
|
|
|
## Custom split column pattern (manual HStack)
|
|
|
|
Use this when you want full control over column sizing, behavior, and environment tweaks.
|
|
|
|
```swift
|
|
@MainActor
|
|
struct AppView: View {
|
|
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
|
|
@AppStorage("showSecondaryColumn") private var showSecondaryColumn = true
|
|
|
|
var body: some View {
|
|
HStack(spacing: 0) {
|
|
primaryColumn
|
|
if shouldShowSecondaryColumn {
|
|
Divider().edgesIgnoringSafeArea(.all)
|
|
secondaryColumn
|
|
}
|
|
}
|
|
}
|
|
|
|
private var shouldShowSecondaryColumn: Bool {
|
|
horizontalSizeClass == .regular
|
|
&& showSecondaryColumn
|
|
}
|
|
|
|
private var primaryColumn: some View {
|
|
TabView { /* tabs */ }
|
|
}
|
|
|
|
private var secondaryColumn: some View {
|
|
NotificationsTab()
|
|
.environment(\.isSecondaryColumn, true)
|
|
.frame(maxWidth: .secondaryColumnWidth)
|
|
}
|
|
}
|
|
```
|
|
|
|
## Notes on the custom approach
|
|
|
|
- Use a shared preference or setting to toggle the secondary column.
|
|
- Inject an environment flag (e.g., `isSecondaryColumn`) so child views can adapt behavior.
|
|
- Prefer a fixed or capped width for the secondary column to avoid layout thrash.
|
|
|
|
## Alternative: NavigationSplitView
|
|
|
|
`NavigationSplitView` can handle sidebar + detail + supplementary columns for you, but is harder to customize in cases like:\n- a dedicated notification column independent of selection,\n- custom sizing, or\n- different toolbar behaviors per column.
|
|
|
|
```swift
|
|
@MainActor
|
|
struct AppView: View {
|
|
var body: some View {
|
|
NavigationSplitView {
|
|
SidebarView()
|
|
} content: {
|
|
MainContentView()
|
|
} detail: {
|
|
NotificationsView()
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## When to choose which
|
|
|
|
- Use the manual HStack split when you need full control or a non-standard secondary column.
|
|
- Use `NavigationSplitView` when you want a standard system layout with minimal customization.
|