如何在SwiftUI中对齐文本和图像的顶部

Question

如何将“教练名称（包括金星）”的文本顶部与多个用户图标的顶部对齐？试图找到最简单最简单的方法。我在Hstack中嵌入了两个VStack，但是我的右Vstack中有3个项，它使右侧比左侧更多地向上推动。我希望左侧的顶部与右侧的顶部对齐

HStack{
    VStack (alignment: .leading, spacing: 5){
        Spacer()
        HStack{
            Text("Coach Name")
                .fontWeight(.black)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            HStack{
                Image (systemName: "star.fill")

                Text( "4.9")
            }.foregroundColor(Color (red: 0.942, green: 0.505, blue: 0.103, opacity: 1))
            Spacer()
        }
        HStack{
            Text("Sport")
                .fontWeight(.semibold)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))


        }


    }//closes coach name vstack in overall Hstack
    Spacer()
    VStack (alignment: .trailing , spacing: 5){
        Spacer()
        Image(systemName: "person.2")
            .resizable()
            .frame(width: 38, height: 25, alignment: .center)
            .font(Font.title.weight(.regular))
            .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
        Text ("Starting at")
            .font(.caption)
             .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            .fontWeight(.light)
        HStack (spacing: 0){
             Text ("$100")
                .fontWeight(.bold)
            Text (" / Session")
        }  .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))


    }
}

Answer 1

这是我要这样做的方式（删除了一些不必要的垫片，并为顶部容器添加了明确的垂直对齐方式）：

注意：我还建议将其放置在单独的视图中，因此，如果需要将其作为一个整体进行布局（例如放到底部），则操作起来会更简单（例如放入其他容器并添加上面的间隔物）

HStack(alignment: .top){
    VStack (alignment: .leading, spacing: 5){
        HStack(alignment: .top){
            Text("Coach Name")
                .fontWeight(.black)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            HStack{
                Image (systemName: "star.fill")

                Text( "4.9")
            }.foregroundColor(Color (red: 0.942, green: 0.505, blue: 0.103, opacity: 1))
            Spacer()
        }
        HStack{
            Text("Sport")
                .fontWeight(.semibold)
                .font(.body)
                .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))

        }

    }//closes coach name vstack in overall Hstack
    Spacer()
    VStack (alignment: .trailing , spacing: 5){
        Image(systemName: "person.2")
            .resizable()
            .frame(width: 38, height: 25, alignment: .center)
            .font(Font.title.weight(.regular))
            .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
        Text ("Starting at")
            .font(.caption)
             .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
            .fontWeight(.light)
        HStack (spacing: 0){
             Text ("$100")
                .fontWeight(.bold)
            Text (" / Session")
        }  .foregroundColor(Color (red: 0.35, green: 0.35, blue: 0.35, opacity: 0.8))
    }
}