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

Question

如何在 swiftUI 中相对于其左上角定位视图？“位置”修饰符相对于它们的中心坐标移动视图。所以.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

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

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

Answer 3

您可以使用：

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

所以你将相对于当前对象位置。

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