SwiftUI resize a rectangle to fit the content

Question

using SwiftUI on my project I'm try to display some data in a list.

I would like to insert on the left side of my cell a rectangle(), but I can't find the way to fix the height.

(i don't want to manual input the height otherwise it doesn't look good on different device)

I'm try using geometry render but not working.

I highlight on the attached picture my idea...

here my code:

import SwiftUI

struct MatchViewUser: View {
    var match : MatchModel
    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return formatter
    }
    
    var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.locale = Locale(identifier: "en_US_POSIX")
        
        formatter.dateFormat = "HH:mm a"
        formatter.amSymbol = "AM"
        formatter.pmSymbol = "PM"
        return formatter
    }
    var body: some View {
        GeometryReader { geometry in
        HStack {
            
            Rectangle().frame(width: 30,height: geometry.size.height  ,alignment: .leading)
            VStack(alignment:.leading){
                HStack{
                    Text("\(self.match.dateMatch, formatter: self.dateFormatter)")
                    Spacer()
                    Text("Time:\(self.match.dateMatch, formatter: self.timeFormatter)")
                }.font(.headline).foregroundColor(.blue)
                
                Divider().padding(.horizontal)
                HStack{
                    VStack(alignment:.leading){
                        Text("Match Name:").bold()
                        Text("\(self.match.matchName)").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.leading){
                        Text("Pitch Name").bold()
                        Text("\(self.match.pitchName)").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.trailing){
                        Text("Player").bold()
                        Text("\(self.match.maxPlayer)").font(.body)
                    }
                }.font(.headline)
                
            }
        }
        }
        
    }
    
}

Answer 1

Here is a demo of possible approach (simplified your code w/o dependent model). Prepared & tested with Xcode 11.4 / iOS 13.4

struct DemoView: View {

    var dateFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return formatter
    }
    let dateMatch = Date()
    var timeFormatter: DateFormatter {
        let formatter = DateFormatter()
        formatter.locale = Locale(identifier: "en_US_POSIX")

        formatter.dateFormat = "HH:mm a"
        formatter.amSymbol = "AM"
        formatter.pmSymbol = "PM"
        return formatter
    }
    var body: some View {
        HStack {
            VStack(alignment:.leading){
                HStack{
                    Text("\(self.dateMatch, formatter: self.dateFormatter)")
                    Spacer()
                    Text("Time:\(self.dateMatch, formatter: self.timeFormatter)")
                }.font(.headline).foregroundColor(.blue)

                Divider().padding(.horizontal)
                HStack{
                    VStack(alignment:.leading){
                        Text("Match Name:").bold()
                        Text("Demo1").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.leading){
                        Text("Pitch Name").bold()
                        Text("Demo2").font(.body)
                    }
                    Spacer()
                    VStack(alignment:.trailing){
                        Text("Player").bold()
                        Text("10").font(.body)
                    }
                }.font(.headline)
            }.padding(.leading, 38)
        }.overlay(
            Rectangle().frame(width: 30)
        , alignment: .leading)
    }
}