SwiftUI中如何对齐图片与下方文本框？布局异常求助

你的布局问题核心是图片和文本框宽度不统一，加上scaledToFit的特性导致元素错位、出现多余空白，可通过以下修改解决：

修改后的代码 #

ForEach(listing.items, id: \.self) { i in
    VStack(alignment: .leading, spacing: 6) {
        Image(i.itemImageUrl)
            .resizable()
            .scaledToFit()
            // 让图片占满父容器宽度，保持内容左对齐
            .frame(maxWidth: .infinity, alignment: .leading)
            .overlay(
                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)")
            // 用maxWidth适配布局，确保文本框占满可用宽度
            .frame(maxWidth: .infinity, alignment: .topLeading)
            .padding(8)
            .background(Color.gray.opacity(0.2))
            .font(.body)
    }
    .padding()
}

关键修改说明 #

• 给Image添加.frame(maxWidth: .infinity, alignment: .leading)：强制图片拉伸至父容器最大宽度，同时保持内容左对齐，让图片和下方文本框宽度统一，解决错位问题。
• 移除多余的ZStack：原代码里的ZStack是冗余层级，直接给文本叠加样式即可，减少布局复杂度。
• 替换width: .infinity为maxWidth: .infinity：前者在部分父容器约束下易引发布局异常，后者更符合SwiftUI自适应逻辑，确保文本框占满可用宽度。

如果仍有空白，检查外层容器（比如该ForEach所在的父视图）是否存在额外的padding或frame约束，这些也会影响最终布局。

内容的提问来源于stack exchange，提问作者user20275599