Expandable Grid Dividers in SwiftUI

I ran into an odd issue where expanding and collapsing the an HStack with two items would lead to padding getting messed up for 1 of the views. Ended up using a Grid. since there isnt a divider property it needed a 3 column with the middle being fixed width. Google and ChatGPT were not helpful for me. I landed on this approach the hard way. lol

DualColumnDividedView

/// Returns a LazyVGrid containing the LeftSectionUIView and RightSectionUIView.
/// - NOTE: For .top alignment functionality we use a 3 column grid with middle grid being a fixed width VDivider.

func getDualColumnDividedGrid() -> some View {
    let columns: [GridItem] = [
      GridItem(.flexible(), spacing: 16, alignment: .top),
      GridItem(.fixed(16), spacing: 8, alignment: .top),
      GridItem(.flexible(), spacing: 16, alignment: .top)
    ]

    return LazyVGrid(columns: columns ) {
         LeftSectionUIView()
         VDividerUIView()
         RightSectionUIView()
     }
}

VDividerUIView

Oddly enough I realized I the stock divider was not ideal since it seems to be oriented to be used in vertical use. I expected it to just work when place in an Grid or HStack. That failed so I made my own.

struct VDividerUIView: View {
  var body: some View {
      Color.auxilary
            .frame(width: 1)
  }
}

Summary

The trick with the code above was keeping the Grid items alignment to .top . That was the main think the internet seemed to miss in all their approaches. It was fighting the language imo.

SwiftUI and LazyGrid for the win on that one. It wouldve been a pain to make that work with UIStackView or NSAnchors. Easily 70+ lines if it wasnt in SwiftUI.

Happy Coding ;-)