iOS: SwiftUI 创建视图的建议

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?

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