Swift：如何对齐图像和下面的文本框？

Question

我正在尝试将图像与 Swift 应用程序中的文本框对齐。 我怎样才能让它看起来正确？

这是我的代码版本，很时髦。我已经尝试了很多方法，但我需要帮助。

ForEach(listing.items, id: \.self) { i in
                VStack(alignment: .leading, spacing: 6) {
                    Image(i.itemImageUrl)
                        .resizable()
                        .scaledToFit()
                        .overlay(
                            ZStack {
                                Text("$ \(i.priceOfItem)")
                                    .font(.body)
                                    .padding(5)
                                    .foregroundColor(.white)
                            }
                                .background(Color.black)
                                .opacity(0.7)
                                .cornerRadius(12)
                                .padding(10),
                            alignment: .bottomTrailing)
                   
                        Text("Description: \(i.itemDescription)")
                        .frame(width: .infinity, alignment: .topLeading).padding(8)
                            .background(Color.gray.opacity(0.2))
                            .font(.body)
                }
                .padding()

在此输入图片描述

我的目标是左侧对齐，但是当代码在另一个视图中渲染时，会出现奇怪的空白。

Answer 1

您检查过图像本身是否有空白吗？

VStack(alignment: .leading, spacing: 6) {
        Image(systemName: "folder.fill")
            .resizable()
            .scaledToFit()
            .overlay(alignment: .bottomTrailing) {
                Text(1300.75, format: .currency(code: "USD"))
                    .font(.body)
                    .padding(5)
                    .foregroundColor(.white)
                    .background(Color.red)
                    .opacity(0.7)
                    .cornerRadius(12)
                    .padding([.trailing, .bottom], 20)
            }
            .border(Color.black, width: 1) // This border shows if the image is actually as big as you want it to be
        Text("Description: A large black folder")
            .frame(alignment: .topLeading).padding(8)
            .background(Color.gray.opacity(0.2))
            .font(.body)
    }
    .padding()