SwiftUI equivalent of UIStackView.Distribution.fillEqually

I'm trying to make a simple VStack in SwiftUI where each view in the stack has the same height. The heights should be equal to the least amount of space required for the biggest view in the stack.

My minimum deployment target is iOS 13.

Here is an example of what I want: enter image description here

And this is what I currently have: enter image description here

In UIKit this is done easily by making the vertical UIStackView with .fillEqually distribution and then setting the contentCompressionResistancePriority to .required for the vertical component while keeping contentHuggingPriority to usually .defaultLow.

However in SwiftUI I'm not sure how to achieve this in a dynamic way. I don't want to set hardcoded frame heights.

I've tried setting .frame(maxHeight: .infinity) alongside .fixedSize(horizontal: false, vertical: true) but it doesn't seem to work in this scenario. I can do HStack with equal heights using this method and VStack with equal widths. But it doesn't seem to work for VStack with equal height and presumably also HStack equal width.

This is my code so far:

struct AccountSelectionView: View {
  @ObservedObject private(set) var viewModel: AccountSelectionViewModel
  
  var body: some View {
    VStack(spacing: 12) {
      ForEach(viewModel.model.accounts, id: \.title) { account in
        AccountView(account: account)
          .padding(16)
          .frame(maxHeight: .infinity)
          .overlay(RoundedRectangle(cornerSize: .init(width: 4, height: 4)).stroke(Color.outlineGrey, lineWidth: 1))
      }
    }
    .fixedSize(horizontal: false, vertical: true)
    
    Spacer()
  }
}
struct AccountView: View {
  let account: Account
  
  var body: some View {
    HStack {
      Image(uiImage: account.image)
        .padding(.trailing, 20)
      
      VStack(alignment: .leading) {
        Text(account.title)
          .font(.appFont("Heavy", size: 16))
        Text(account.message)
          .font(.appFont("Roman", size: 14))
      }
      Spacer()
    }
  }
}

I've also tried adding .frame(maxHeight: .infinity) and spacers to the AccountView but it didn't make a difference.



Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)