如何在SwiftUI中相对于视图的左上角定位视图

Question

在swiftUI中如何相对于视图的左上角定位？“position”修饰符会将视图相对于它们的中心坐标移动。因此，.position(x: 0, y: 0) 将视图的中心坐标放置在屏幕的左上角。

我想将视图的左上角坐标放在屏幕的左上角，该怎么做呢？

struct HomeView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Top Text")
                .font(.system(size: 20))
                .fontWeight(.medium)
             Text("Bottom Text")
                .font(.system(size: 12))
                .fontWeight(.regular)
        }
        .position(x: 0, y: 0)
    }
}

目前，我的视图左半部分被屏幕截断了，我该如何防止这种情况？另外，我该如何相对于安全区域对齐？

我想念 UIKit。

- yambo

Answer 1

@Asperi的答案将解决问题。不过，我认为我们应该使用Spacer()而不是Color.clear和ZStack。

Spacer是专门为这些场景设计的，可以使代码更易于理解。

struct HomeView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Top Text")
                    .font(.system(size: 20))
                    .fontWeight(.medium)

                Text("Bottom Text")
                    .font(.system(size: 12))
                    .fontWeight(.regular)
                Spacer()
            }
            Spacer()
        }
    }
}

SwiftUI布局系统与UIKit不同。

它会要求每个子视图根据其父视图的边界计算自己的大小。接下来，要求每个父视图在其自身范围内定位其子视图。

https://www.hackingwithswift.com/books/ios-swiftui/how-layout-works-in-swiftui

- sElanthiraiyan

---

完成任务了！但是，我该如何使用这种技术来对齐其他视图呢？我正在寻找一种方法，可以像position()函数一样对齐任何视图，只不过我是从左上角而不是中心对齐。 - yambo

回答中添加了更多细节。我建议你多了解一下SwiftUI的布局系统。我相信你会比UIKit的frame或autolayout定位更喜欢它。 - sElanthiraiyan

Answer 2

如果我正确理解你的目标，那么.position不是合适的工具。SwiftUI布局在没有硬编码的情况下更有效。

以下是可能的解决方案。经过Xcode 11.4 / iOS 13.4测试。

struct HomeView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            Color.clear
            VStack(alignment: .leading) {
                Text("Top Text")
                    .font(.system(size: 20))
                    .fontWeight(.medium)
                 Text("Bottom Text")
                    .font(.system(size: 12))
                    .fontWeight(.regular)
            }
        }.frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

- Asperi

---

完成任务了！但是，我该如何使用这种技术来对齐其他视图呢？我正在寻找一种方法，可以像position()函数一样对齐任何视图，只不过我是从左上角而不是中心对齐。 - yambo

+1 for ZStack(alignment: .topLeading)！（使用H/V堆栈和间隔器时会出现各种有趣的问题。） - bauerMusic

我一开始不明白你为什么要用Color.clear，直到我尝试了它。它充实了z-stack！太棒了，从没想过。 - Dren

Answer 3

您可以使用：

offset(x: CGFloat = 0, y: CGFloat = 0) -> some View

所以，您将是相对于当前对象位置。

https://developer.apple.com/documentation/swiftui/gaugestyleconfiguration/currentvaluelabel-swift.struct/offset(x:y:)

- Luc-Olivier

---

如果解决方案是使用offset()，我认为我们应该使用GeometryReader将所有内容嵌入其中，这样offset()的计算就会是动态的。 - OhadM

Answer 4

框架也可以堆叠。

Text("ABC")
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(.red)
    .frame(height: 100, alignment: .top)
    .background(.blue)

- XY L