This might sound silly but it took me a while to wrap my head around laying views out from top in SwiftUI. Here's how to do it if you're wondering too!

Imagine the scenario outlined by the screen shot below. I would like my header view to be pinned to top.

This is not what I wanted...

In code this is a VStack containing a header view and a text.

VStack {
    HeaderView()
    Text("Some other content...")
}

Using autolayout we'd simply just pin the view to top. In SwiftUI this is not possible.

Fortunately the solution is very simple. We just need to insert a Spacer! Actually, let's add two...

VStack {
    HeaderView()
    Spacer()
    Text("Some other content...")
    Spacer()
}

And voilà we get the result we wanted.

Much better!

Below you can find the full code for reference.

import SwiftUI

struct HeaderView: View {
    var body: some View {
        VStack {
            Text("Header title")
        }
        .frame(maxWidth: .infinity, maxHeight: 200)
        .background(
            LinearGradient(
                gradient: Gradient(colors: [.yellow, .red]),
                startPoint: .leading,
                endPoint: .trailing
            )
        )
    }
}

struct ExampleView: View {
    var body: some View {
        VStack {
            HeaderView()
            Spacer()
            Text("Some other content...")
            Spacer()
        }
    }
}

#if DEBUG
struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}
#endif

This really is it. The only difference between a centered view and a view pinned to top is the Spacer in our VStack.