SwiftUI resize a rectangle to fit the content - swift

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)
}
}