Question

当我学习诸如SwiftUI（测试版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修饰符表示：

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

这里有两点很重要：

视图是根据其中心而不是其左上角移动的
视图在父级的坐标空间中移动

但是文本的父母是谁？ SwiftUI中的view modifier是适用于View并返回View的东西。修饰符从最后一个应用到第一个（与您看到它们的顺序相反）。就您而言：

因此：Text的中心相对于Frame 50x100带有红色Border的（0,0）位置。由于VStack（这是VStack的默认行为），因此导致的视图位于屏幕的中央。换句话说：position的父级（position返回一个View，每个修饰符返回一个View）是Frame的50x100，位于屏幕。

如果要将Text的左上角放置在Frame坐标空间的（0,0）处，则应使用Spacer修饰符：

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

您会得到：

如果您希望Frame的左上角相对于整个View处于（0,0），我认为最简单的方法是：

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

您会得到：

Answer 2

以这种方式做

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

            .padding()
            Spacer()
        }
    }
}

以下输出

如果要删除顶部空间，请为视图添加.edgesIgnoringSafeArea(.top)，如下所示

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

            .padding()
            Spacer()
        }
        .edgesIgnoringSafeArea(.top)
    }
}

Answer 3

有了超级杯咖啡的完美答案，我还向所有想了解swiftUI布局基础知识的人推荐阅读这篇文章： https://kean.github.io/post/swiftui-layout-system

SwiftUI-设置视图框架

3 个答案: