如何在 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

Answer 1

如果我正确理解了您的目标，那么 .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 2

@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 不同。

它要求每个 child 视图根据其 parent 视图的边界计算自己的大小。接下来，要求每个 parent 将其 children 定位在自己的范围内。

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

Answer 3

您可以使用：

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

因此您将相对于当前对象位置。

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

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

How To Position Views Relative To Their Top Left Corner In SwiftUI

position

view

ios

swiftui