如何将文本与有框架的 VStack 底部对齐？

Question

I am creating a view that is a rectangle that contains an: image, name, subtitle.

I have these in a VStack with a frame. In this VStack, the views stack correctly. However, I want the subtitle (which is text) to always be stuck to the bottom of the VStack.

At the moment the subtitle is pushed up with the other views. I tried using Spacer's but these didn't seem to do the job (maybe I used them wrong???).

Here is the view:

   VStack(alignment: .center, spacing: 0) {
                    
                    
                    Image("Image")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .clipped()
                                .padding()
                                .layoutPriority(1)
                        }
                    }
                                         
                    
                    Text("Name")
                    .font(.title2)
                    .fontWeight(.bold)
                    .foregroundColor(.black)
                    .minimumScaleFactor(0.5)
                    .multilineTextAlignment(.center)
                    .padding(.leading, 5)
                    .padding(.trailing, 5)
                    .padding(.bottom, 5)
                    

                    Text("Subtitle")
                    .font(.caption)
                    .foregroundColor(.gray)
                    .lineLimit(2)
                    .padding(1)
          
            }
                .frame(width: 150, height: 200)

Any ideas?

Answer 1

Put the subtitle into an .overlay() of the VStack and use alignment: .bottom to push it to the bottom:

VStack(alignment: .center, spacing: 0) {
    
    Image("Image")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .clipped()
        .padding()
        .layoutPriority(1)

    Text("Name")
        .font(.title2)
        .fontWeight(.bold)
        .foregroundColor(.black)
        .minimumScaleFactor(0.5)
        .multilineTextAlignment(.center)
        .padding(.leading, 5)
        .padding(.trailing, 5)
        .padding(.bottom, 5)
}
.frame(width: 150, height: 200)
.overlay(alignment: .bottom) {
    Text("Subtitle")
        .font(.caption)
        .foregroundColor(.gray)
        .lineLimit(2)
        .padding(1)
}