如何在 SwiftUI 的框架中对齐 VStack 中的视图？

Question

我有一个显示三件事的“瓷砖”。 产品照片、产品名称和产品类型（见照片）。 当产品的标题较长时，照片会按预期向上推并变小。 我需要让产品的标题和类型在框架中降低，这样照片就可以成为主要焦点。 我不确定如何实现这一目标。

这是此视图的代码：

 VStack(alignment: .center, spacing: 0) {
                    
                    WebImage(url: URL(string: productData.product_profileImage))
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .clipped()
                        .padding(5)
               
                    Text(productData.product_name)
                    .font(.title2)
                    .fontWeight(.bold)
                    .foregroundColor(.black)
                    .minimumScaleFactor(0.5)
                    .multilineTextAlignment(.center)
                    .padding()

                    
                Text(productData.product_type)
                    .font(.caption)
                    .foregroundColor(.gray)
                    .lineLimit(2)
                    .padding()
            }
                .frame(width: 150, height: 200)

这是它目前的样子的照片：

Answer 1

给图像更高的布局优先级，所以它会首先布局并保留所有需要的空间，比如

WebImage(url: URL(string: productData.product_profileImage))
    .resizable()
    .aspectRatio(contentMode: .fit)
    .clipped()
    .padding(5)
    .layoutPriority(1)     // << here !!

使用 Xcode 13.4 / iOS 15.5 测试

Answer 2

您还可以通过将 Text 内容包装在单独的VStack中来实现它。

VStack(alignment: .center, spacing: 0) {
        
        WebImage(url: URL(string: productData.product_profileImage))            
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipped()
            .padding(5)
        
        VStack { //Wrap your text content into VStack
            Text("Example Product A")
                .font(.title2)
                .fontWeight(.bold)
                .foregroundColor(.black)
                .minimumScaleFactor(0.5)
                .multilineTextAlignment(.center)
                .padding()
            
            
            Text("Clothing")
                .font(.caption)
                .foregroundColor(.gray)
                .lineLimit(2)
                .padding()
        }

}.frame(width: 150, height: 200)