Posted on July 30, 2020
The PreferenceKey protocol can be implemented to ensure the width of two views stay the same. For example, in the image below, the red bottom rectangle will remain the same width as the orange rectangle when the window is resized.
struct ViewWidthKey: PreferenceKey {
static var defaultValue: CGFloat = 0.0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = nextValue()
}
}
struct ContentView: View {
@State private var boxWidth = CGFloat.zero
var body: some View {
VStack {
HStack {
Rectangle()
.fill(Color.purple)
.frame(width: 20)
Rectangle()
.fill(Color.orange)
.background(GeometryReader {
Color.clear.preference(key: ViewWidthKey.self, value: $0.frame(in: .local).size.width)
})
}
HStack {
Spacer()
Rectangle()
.fill(Color.red)
.frame(width: boxWidth, height: 20)
}
}
.onPreferenceChange(ViewWidthKey.self) { self.boxWidth = $0 }
.frame(minWidth: 400, minHeight: 250)
}
}
See Apple’s documentation for more information about the PreferenceKey protocol.
The SwiftUI Lab and Swift with Majid articles also discuss the PreferenceKey protocol.
Gavin Wiggins © 2020