SwiftUI - 设置视图框架

Question

当我学习像 SwiftUI (beta 6) 这样的新东西时，我想从基础开始。

我只想像在 UIKit 中一样将框架设置为子视图。我在这里缺少什么？（这是来自模拟器）

1.子视图不在0,0位置。
2. 为什么至少单词的开头不在边界内？

更新： 如何在 0,0 位置设置文本视图？（就像在 UIKit 上一样）
我认为我的问题很清楚，但由于某种原因，事实并非如此。

Answer 1

我认为了解为什么您的解决方案不起作用很重要，因为乍一看似乎是正确的，而且 SwiftUI 似乎以一些奇怪的方式工作（因为，当然，我们都习惯了UIKit）。你试过：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
                .position(CGPoint(x: 0, y: 0))
                .frame(width: 50, height: 100)
                .border(Color.red, width: 4)
        }
    }
}

你得到了：

首先，position修饰符说：

将视图的中心固定在其父级坐标空间中的指定点。

这里有两件事很重要：

• 视图基于其中心移动，而不是基于其左上角
• 视图在父级坐标空间中移动

但谁是 Text 的父母？view modifierSwiftUI 中的A是适用于 aView并返回 a 的东西View。修饰符从最后一个应用到第一个（与您看到它们的顺序相反）。在你的情况下：

所以：该中心的Text位于（0,0）相对于Frame50×带有红色Border。由于VStack（这是VStack默认行为），生成的 View 被放置在屏幕的中心。换句话说：position父元素（position返回 a View，每个修饰符都返回 a View）是Frame放置在屏幕中央的50x100。

如果要将Textat (0,0) 的左上角定位在Frame坐标空间中，则应以Spacer这种方式使用修饰符：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
            Spacer()
        }
        .frame(width: 50, height: 100)
        .border(Color.red, width: 4)
    }
}

你会得到：

如果你想，相反，左上角的Frame(0,0) 尊重整体View我认为最简单的方法是：

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("Hello World")
                    .frame(width: 50, height: 100)
                    .border(Color.red, width: 4)
                Spacer()
            }
            Spacer()
        }
        .edgesIgnoringSafeArea(.all)
    }
}

你会得到：