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

Posted 2023-02-24

【中文标题】SwiftUI - 文本和形状位置之间的不一致

【英文标题】：SwiftUI - inconsistency between Text and Shape position

【发布时间】：2021-02-04 05:06:27

【问题描述】：

我创建了一个带有 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

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

【参考方案1】：

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

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

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

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

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

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

【讨论】：

感谢您的解释！我没有尝试添加背景，因为我认为除了整个形状的大小之外，尺寸不会改变任何东西。

【参考方案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)
        
    

【讨论】：

感谢您的回答 - 是的，我错过了 .frame 功能！