alignment - 如何在 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

这是我将如何执行此操作(删除了几个不需要的间隔器并为顶部容器添加了明确的垂直对齐方式):

注意:我还建议将它放在单独的 View 中，因此如果需要将其作为一个整体进行布局(例如，放在底部)，则操作起来会更简单(例如，放入其他容器并在其上方添加间隔器) )

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