Question

我已经尝试过这段代码并将嵌套视图的对齐方式设置为 .top。但它仍然居中。

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle().fill(Color.red).frame(maxWidth: .infinity, maxHeight: 100, alignment: .top)
        }
    }
}

Answer 1

你不需要需要使用矩形来完成这项工作，而是使用颜色，它使你的视图更便宜/渲染速度更快，更少CPU 比使用矩形然后尝试用颜色填充它。

struct ContentView: View {
    var body: some View {
        ZStack {
            
            Color.yellow
            
            VStack {
                
                Color.red.frame(height: 100)
                
                Spacer()
                
                Color.blue.frame(height: 100)
                
            }
            
        }
    }
}

Answer 2

周围的 ZStack 需要有一个框架来占据整个视图——否则它只是矩形的高度。它也是需要 .top 对齐的那个：

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.red)
                .frame(height: 100)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
    }
}

更新，根据评论：

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(height: 100)
                Spacer()
                Rectangle()
                    .fill(Color.green)
                    .frame(height: 100)
            }
        }
    }
}

Answer 3

另一种非常直接的方法 - 您需要一个 GeometryReader，但要定位 x 而不是 y。

        GeometryReader { reader in
            ZStack {
                Rectangle()
                    .fill ( Color.red )
                    .frame ( height: h )
                    .position ( x: 0.5 * reader.size.width, y: 0.5 * h )
            }
        }

这里的 h 是所需的高度。

Answer 4

这里的答案很好，但值得深入探讨一下您最初为何感到困惑。让我们看看你的代码：

ZStack {
    Rectangle()
        .fill(Color.red)
        .frame(maxWidth: .infinity, maxHeight: 100, alignment: .top)
}

这是一个矩形，包含在填充中，包含在框架中，包含在 ZStack 中。每一个都是它自己的视图。

首先，Rectangle 声明它将使用描边和填充矩形填充它提供的任何空间，使用其父项设置的任何描边和填充颜色。

包装矩形的填充将其子项的填充颜色设置为红色。

框架提供“框架所提供的和无穷大的出租方”作为宽度，“框架所提供的出租方和 100”作为其子项的高度。它的子项（包含矩形的填充）接受它们提供的所有空间，最终将是“屏幕的宽度和 100 点高”。框架将自己的宽度设置为此，并在顶部对齐它的一个孩子。

ZStack 为 Frame 提供整个屏幕尺寸。 Frame 完成后，ZStack 将自己的大小设置为其子项（Frame）的大小，并将其子项居中（因为这是它的对齐方式）。

包含视图（即屏幕的大小），然后将小 ZStack 居中。

关键是 .top 适用于 Frame，而不是 ZStack，也不是整个 View。

那么你如何得到你想要的？首先，您希望 ZStack 是整个 View 的大小。这意味着它的 children 必须是整个 View 的大小。 ZStack 总是其子项的确切大小。

但实际上，做你所描述的事情的自然方法是使用 VStack，因为你真的想要一个垂直的视图堆栈：

VStack {
    Rectangle().fill(Color.red).frame(height: 100)
    Spacer()
}

或者正如 Swiftpunk 指出的那样，您可以直接使用 Color，尽管这是一个微不足道的区别。它只是在代码中短了一点。这里设置宽度没有意义。

VStack {
    Color.red.frame(maxHeight: 100)
    Spacer()
}

如果你想要一个 ZStack（我不知道为什么，但如果你想要），那么你可以通过强制 ZStack 和它提供的一样大来实现同样的事情，包括一个颜色，然后也问它将其元素对齐到 topLeading。

ZStack(alignment: .topLeading) {
    Color.clear // Color is always as large as the space offered
    Color.red.frame(maxHeight: 100)
}

Answer 5

你可以试试这个：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .top) {
            Rectangle()
               .fill(Color.red)
               .frame(maxWidth: .infinity, maxHeight: 100)
        }
    }
}

斯威夫特用户界面。如何在 ZStack 顶部放置视图？

5 个答案: