iOS: SwiftUI suggestion to create a view - ios

Question

I'm trying to make a view in SwiftUI as shown below using SwiftUI.
Below is the code I have written, but I'm not sure what will the best way to code this is. My code looks like below with hard-coded values.
var body: some View {
TestView {
VStack {
HStack {
Image("profile")
.padding(.top, 30)
.padding(.leading, 30)
Spacer()
}
HStack {
Text("UserName")
.font(.system(size: 20, weight: .bold, design: .default))
.foregroundColor(.gray)
.padding(.leading, 30)
Spacer()
}
.padding(.bottom, 1)
HStack(spacing: 0) {
Text("4")
.font(.system(size: 42, weight: .bold, design: .default))
.foregroundColor(.pink)
VStack {
Text("/10")
.font(.system(size: 25, weight: .bold, design: .default))
.foregroundColor(.gray)
Spacer()
Spacer()
Spacer()
Spacer()
}
}
Image("stars")
.resizable()
.padding(.leading, 20)
.padding(.trailing, 20)
.padding(.bottom, 5)
}
}
.frame(width: 200, height: 250, alignment: .center)
}
the output looks like this
I believe this should not be the correct way to do this, with multiple spacers, too many adjustments.
I'm new to SwiftUI, though the same UI in xib/storyboard won't take me more than 10-15mins with constraints.
Can anyone suggest a better way?
P.S. please ignore color and font size
-----------------------------Updated code----------------------------
var body: some View {
TestView {
VStack(alignment: .leading) {
Image("profile") //Async-image
.offset(x: 30)
VStack(alignment: .center) {
Text("UserName")
.font(Font(nameFont))
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {
HStack(alignment: .firstTextBaseline) {
Text("4")
.font(Font(bigFont))
.foregroundColor(.pink)
}
HStack(alignment: .firstTextBaseline, spacing: 0) {
Text("4")
.font(Font(bigFont))
.opacity(0)
Text("/5")
.font(Font(smallFont))
.baselineOffset((bigFont.capHeight))
.foregroundColor(.gray)
}
}
Image("stars") //view with rating logic
.resizable()
.frame(height: 30)
.padding(.leading, 20)
.padding(.trailing, 20)
.padding(.bottom, 5)
}
}
}
.frame(width: 200, height: 250, alignment: .center)
}

Answer 1

Could avoid Spacers and VStack
HStack(spacing: 0) {
Text("4")
.font(.system(size: 42, weight: .bold, design: .default))
.foregroundColor(.pink)
Text("/10")
.font(.system(size: 25, weight: .bold, design: .default))
.foregroundColor(.gray)
.offset(y: -20)
}