如何在 SwiftUI 中的图像下放置文本？

Question

我正在尝试在我的 swiftUI 项目中创建一些磁贴。

瓷砖需要看起来像这样：

基本上，我需要将标题放在左侧，并将文本放在图像下方。

我可以创建图像，我可以将文本叠加在图像上，但不能将它们放在图像下方，也不能将标题放在左侧。

这是我当前的代码：

Image("flower")
               .resizable()
               //.aspectRatio(contentMode: .fill)
               .frame(width: 160, height: 200)
               // Overlay is a very simple way to add content on top of your view ! ?
     
    
               .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
               .shadow(color: Color.black.opacity(0.3), radius: 6, x: 0, y: 3)
     
        VStack(alignment: .trailing, spacing: 6) {
    
          Text("sit amet")
            .background(Color.gray.opacity(0.2))
            .font(.caption)
        }.onTapGesture {
                   // Handle the action when the card is touched
         
   
                }

有人可以就此提出建议吗？

Answer 1

将图片和文字都放在VStack下，如下：

VStack(alignment: .leading, spacing: 6) {
      Image("flower")
                   .resizable()
                   //.aspectRatio(contentMode: .fill)
                   .frame(width: 160, height: 200)
                   // Overlay is a very simple way to add content on top of your view ! ?
                   .clipShape(RoundedRectangle(cornerRadius: 12, style: .continuous))
                   .shadow(color: Color.black.opacity(0.3), radius: 6, x: 0, y: 3)
    
    Text("sit amet")
                .background(Color.gray.opacity(0.2))
                .font(.caption)
            }.onTapGesture {
                       // Handle the action when the card is touched
             
       
                    }

    Text("Some Info goes here")
    }