SwiftUI layout with preference keys

PreferenceKeysLayout.swift

// https://medium.com/ancestry-product-and-technology/swiftui-pro-tips-preferencekey-360505ff8fbb

import SwiftUI

struct TotalWidth {
    struct Key: PreferenceKey {
        static var defaultValue: CGFloat = 0.0
        static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }
    
    struct Notify: ViewModifier {
        let apply: (CGFloat) -> CGFloat
        private var sizeView: some View {
            GeometryReader { geo in
                Color.clear.preference(key: Key.self, value: geo.frame(in: .global).size.width)
            }
        }
        func body(content: Content) -> some View { content.background(sizeView) }
    }
    
    struct WidthApplier: ViewModifier {
        @Binding var width: CGFloat?
        func body(content: Content) -> some View {
            content.onPreferenceChange(Key.self) { value in
                width = max(width ?? 0, value)
            }
        }
        static func notify(_ apply: @escaping (CGFloat) -> CGFloat) -> Notify {
            Notify(apply: apply)
        }
    }
}

//

struct MaxHeight {
    struct Key: PreferenceKey {
        static var defaultValue: CGFloat = 0.0
        static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
            value = max(value, nextValue())
        }
    }

    struct Notify: ViewModifier {
        private var sizeView: some View {
            GeometryReader { geo in
                Color.clear.preference(key: Key.self, value: geo.frame(in: .global).size.height)
            }
        }
        func body(content: Content) -> some View { content.background(sizeView) }
    }

    struct Equalizer: ViewModifier {
        @Binding var height: CGFloat?
        func body(content: Content) -> some View {
            content.onPreferenceChange(Key.self) { value in
                let oldHeigth = height ?? 0
                if value > oldHeigth {
                    height = value
                }
            }
        }
        static var notify: Notify {
            Notify()
        }
    }
}

struct PrefixedRow<Column1: View, Column2: View, Column3: View>: View {
    let firstColumnWidth: CGFloat
    let bgColor1: Color
    let bgColor2: Color
    let column1: () -> Column1
    let column2: () -> Column2
    let column3: () -> Column3
    
    @State private var totalWidth: CGFloat?
    @State private var maxHeight: CGFloat?
    
    var body: some View {
        Grid(horizontalSpacing: 0) {
            GridRow {
                HStack(spacing: 0) {
                    column1()
                        .frame(width: firstColumnWidth)
                        .modifier(MaxHeight.Equalizer.notify)
                    
                    column2()
                        .frame(maxWidth: .infinity)
                        .modifier(TotalWidth.WidthApplier.notify({ w in (w - firstColumnWidth) / 2 }))
                        .modifier(MaxHeight.Equalizer.notify)
                }
                .background(bgColor1)
                
                column3()
                    .frame(maxWidth: .infinity)
                    .modifier(TotalWidth.WidthApplier.notify({ w in (w - firstColumnWidth) / 2 }))
                    .modifier(MaxHeight.Equalizer.notify)
                    .background(bgColor2)
            }
        }
        .modifier(TotalWidth.WidthApplier(width: $totalWidth))
        .modifier(MaxHeight.Equalizer(height: $maxHeight))
    }
}

#Preview {
    let w = CGFloat(50)
    let star = Image(systemName: "star.fill").foregroundStyle(.red)
    let t1 = Text("Andreas").font(.title2).bold().foregroundColor(.blue).padding()
    let t2 = Text("Fredrik").font(.title2).bold().foregroundColor(.black).padding()
    VStack(spacing: 0) {
        Spacer()
        
        PrefixedRow(firstColumnWidth: w, bgColor1: .yellow, bgColor2: .gray) { star } column2: { t1 } column3: { t2 }
        PrefixedRow(firstColumnWidth: w, bgColor1: .yellow, bgColor2: .gray) { star } column2: { t1 } column3: { t2 }
        PrefixedRow(firstColumnWidth: w, bgColor1: .yellow, bgColor2: .gray) { star } column2: { t1 } column3: { t2 }
        
        Spacer()
    }
    .ignoresSafeArea()
    .background(.orange)
}