swift - SwiftUI - 设置视图框架

Question

当我学习 SwiftUI（beta 6）之类的新东西时，我想从基础开始。

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

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

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

标签： swiftswiftui

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修饰符说：

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

这里有两件事很重要：

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

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

所以： 的中心相对于50x100 的红色Text位于 (0,0) 处。由于（这是默认行为），生成的视图被放置在屏幕的中心。换句话说：的父级（返回 a ，每个修饰符返回 a ）是放置在屏幕中心的 50x100。FrameBorderVStackVStackpositionpositionViewViewFrame

Text如果要将at (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)
    }
}

你会得到：