SwiftUI - 文本和形状位置之间的不一致

Question

我创建了一个带有 ZStack 的 SwiftUI 视图，其中包含一个文本和一个矩形。请注意每个位置的不同值，但它们在纵向方向上最终位于大致相同的位置。在横向中，文本相对于屏幕左上角保持在相同的位置，但矩形移动。当我使位置值相同时，矩形似乎始终位于文本的上方和左侧，但横向与纵向的数量不同。我在运行 iOS 14.4（iPhone 和 iPad）的模拟器以及运行 iOS 14.3 的物理 iPad 上都观察到了同样的行为。

我的看法：

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .leading) {
            Text("abc").position(x: 150, y: 150)
            Rectangle().size(width: 50, height: 50).stroke().position(x: 320, y: 450)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

结果：

Portrait orientation

Landscape orientation

为什么视图中文本和矩形元素的位置处理方式不同？以及如何将两者定位在同一位置？

Answer 1

您看到的行为是由于以下原因：

1. Shape 的 .size 修饰符不会改变形状的大小 形状的框架；相反，它返回相同帧大小的形状， 但仅使用提供的大小绘制其内容（路径）。你 如果您向 Rectangle 添加背景，则可以看到这一点 像这样并注意到较小的内容被绘制在 框架的左上角：

   Rectangle()
         .size(width: 50, height: 50)
         .stroke()
         .background(Color.blue.opacity(0.7))
         .position(x: 350, y: 450)

2. .position 修饰符将视图的中心放置在父视图的指定坐标处。

因此，如果您将上述两个放在一起，您会将原始更大的 Rectangle() 的 中心 - 而不是 50x50 - 放置在提供的坐标处，这会导致您看到的行为。

要解决此问题，您可以使用 .frame 修饰符，而不是另一个答案中提到的 .size。

Answer 2

使用框架和相同的位置。

struct ContentView: View {
    let position = CGPoint(x: 150, y: 150)
    var body: some View {
        ZStack(alignment: .top) {
            Text("abc").position(x: position.x, y: position.y)
            Rectangle().stroke()
                .frame(width: 50, height: 50)
                .position(x: position.x + 10, y: position.y + 5)
        }
    }
}