如何在SwiftUI ZStack中对齐文本以缩小屏幕尺寸？

Question

我正在尝试在ZStack中对齐Text视图。它适用于较大的屏幕，如iphone 11 plus max，但在较小的屏幕上，如果我使用如下所示的尾随或前导对齐，则文本将不显示在屏幕上。我在预览版，模拟器和真实的SE设备上得到了相同的结果。

iPhone SE（第二代）的屏幕快照，其中显示了图片归因文字未对齐的文字。

import SwiftUI

struct ItemDetail: View {
    var item: MenuItem
    var body: some View {
        VStack {
            ZStack(alignment: .bottomTrailing) {
                Image(item.mainImage)
                Text("Photo: \(item.photoCredit)")
                    .padding(4)
                    .font(.caption)
                    .background(Color.black)
                    .foregroundColor(.white)
            }
            Text(item.description)
                .padding()
            Spacer()
        }
        .navigationBarTitle(Text(item.name), displayMode: .inline)
    }
}

Answer 1

我认为您的代码很好，问题是您的图像太宽，并且在屏幕的右侧溢出。文本标签正确地对齐了图像的尾部（这就是为什么它可以在更大的设备上使用），而不是屏幕的尾部（您想要的）。

您应该确保图像不会溢出。

Image(item.mainImage)
   .resizable()
   .scaleToFit()

Answer 2

我将使用GeomteryReader。就是这样：

GeometryReader { geo in
      Text(item.description)          
      .fixedSize(horizontal: false, vertical: true)
      .frame(width: geo.size.width, alignment: .leading)
}