iOS: SwiftUI 創建視圖的建議

Question

我正在嘗試使用 SwiftUI 在 SwiftUI 中創建一個視圖，如下所示。

下面是我寫的代碼，但我不確定最好的編碼方式是什么。 我的代碼如下所示，帶有硬編碼值。

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

output 看起來像這樣

我相信這不應該是正確的方法，因為有多個墊片，調整太多。

我是 SwiftUI 的新手，盡管 xib/storyboard 中的相同 UI 不會讓我花費超過 10-15 分鍾的時間。

誰能提出更好的方法？

PS請忽略顏色和字體大小

--------------------------更新代碼-------------------- ----------

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

可以避免Spacers和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)
        }