如何在 SwiftUI ZStack 中对齐文本以适应较小的屏幕尺寸？答案

【问题标题】：How to align text within a SwiftUI ZStack for smaller screen sizes?如何在 SwiftUI ZStack 中对齐文本以适应较小的屏幕尺寸？
【发布时间】：2021-01-24 10:54:41
【问题描述】：

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

iPhone SE（第 2 代）屏幕截图显示照片归属文本的未对齐文本。

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)
    }
}

【问题讨论】：

标签： ios swift swiftui swiftui-zstack

【解决方案1】：

我认为您的代码很好，问题是您的图像太宽并且在屏幕右侧溢出。文本标签与图像的尾部正确对齐（这就是它在更大的设备上工作的原因），而不是屏幕的尾部（你想要的）。

你应该确保你的图片不会溢出。

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

【讨论】：

【解决方案2】：

我会使用 GeomteryReader。就这样：

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

【讨论】：