How to Save and Restore HSplitview Position in SwiftUI - swiftui

Question

I would like to be able to save and restore the position of a SwiftUI splitView but I can’t figure out how to do it. I haven’t found any examples and the documentation doesn’t have any info. I have the following:
struct ContentView: View {
var body: some View {
GeometryReader{geometry in
HSplitView(){
Rectangle().foregroundColor(.red).layoutPriority(1)
Rectangle().foregroundColor(.green).frame(minWidth:200, idealWidth: 200, maxWidth: .infinity)
}.frame(width: geometry.size.width, height: geometry.size.height)
}
}
}
Does anyone know how I can get the position of the slider so it can be saved, and also restored on startup?
Thanks!

Answer 1

Here's a workaround I've been using. It uses a plain HStack and a draggable view to recreate what HSplitView does. You can save then save the draggableWidth state however you want.
public struct SlideableDivider: View {
#Binding var dimension: Double
#State private var dimensionStart: Double?
public init(dimension: Binding<Double>) {
self._dimension = dimension
}
public var body: some View {
Rectangle().background(Color.gray).frame(width: 2)
.onHover { inside in
if inside {
NSCursor.resizeLeftRight.push()
} else {
NSCursor.pop()
}
}
.gesture(drag)
}
var drag: some Gesture {
DragGesture(minimumDistance: 10, coordinateSpace: CoordinateSpace.global)
.onChanged { val in
if dimensionStart == nil {
dimensionStart = dimension
}
let delta = val.location.x - val.startLocation.x
dimension = dimensionStart! + Double(delta)
}
.onEnded { val in
dimensionStart = nil
}
}
}
...
struct ContentView: View {
#AppStorage("ContentView.draggableWidth") var draggableWidth: Double = 185.0
var body: some View {
// This will be like an HSplitView
HStack(spacing: 0) {
Text("Panel 1")
.frame(width: CGFloat(draggableWidth))
.frame(maxHeight: .infinity)
.background(Color.blue.opacity(0.5))
SlideableDivider(dimension: $draggableWidth)
Text("Panel 2")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red.opacity(0.5))
}.frame(maxWidth: .infinity)
}
}