how do you align text to the top of screen in SwiftUI

Question

I'm trying to align "Top Text" to the top of the screen, and I can't find a way to do it. "Top Text" needs to be aligned near the "notch of the iphone screen.

I attached a screenshot of where "Top Text" is currently, and needs to be moved to the top

struct ContentView: View {
    //var newColor : [String: Double] = setColor(red:247, green:186, blue:161)
    var body: some View {
        ZStack {
            VStack(spacing: 0) {
                HStack {
                    Text("Top Text[![enter image description here][1]][1]")
                        .fontWeight(.light)
                        .multilineTextAlignment(.center)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
                        .font(.body)
                        .padding()

                }
                .offset(y: 0)
                .frame(minWidth: 0, maxHeight: 400, alignment: .topLeading)

                VStack {
                    Text("Sign in with Facebook")
                        .fontWeight(.light)
                        .font(.title)
                        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
                        .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))

                    Text("Sign in with Google")
                        .fontWeight(.light)
                        .font(.title)
                        .padding()
                        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
                }
            }
            .foregroundColor(Color.black.opacity(0.7))
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
            .offset(x: 0, y: 0)

        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
        .background(Color.orange.opacity(0.2))
        .edgesIgnoringSafeArea(.all)

    }

}

Answer 1

You can put a Spacer() between your HStack and VStack. This will push the other text to the bottom though. You can put another Spacer() after the bottom Texts to push them up.

Here is basically the same view with less code:

var body: some View {
    ZStack {
        Color(.orange).opacity(0.2).edgesIgnoringSafeArea(.all)

        VStack(spacing: 10) {
            Text("Top Text[![enter image description here][1]][1]")
                .fontWeight(.light)
                .multilineTextAlignment(.center)
                .font(.body)
                .padding()
            Spacer()
            Text("Sign in with Facebook")
                .fontWeight(.light)
                .font(.title)
            Text("Sign in with Google")
                .fontWeight(.light)
                .font(.title)
            Spacer()
        }
        .foregroundColor(Color.black.opacity(0.7))
        .padding()
    }
}

Answer 2

Here is possible approach

var body: some View {
    ZStack(alignment: .top) { // << made explicit alignment to top
        HStack { // << moved this up to ZStack 
            Text("Top Text")
                .fontWeight(.light)
                .multilineTextAlignment(.center)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
                .font(.body)
        }
        .frame(minWidth: 0, maxHeight: 400, alignment: .topLeading)
        VStack(spacing: 0) {

            VStack {
                Text("Sign in with Facebook")
                    .fontWeight(.light)
                    .font(.title)
                    .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
                    .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))

                Text("Sign in with Google")
                    .fontWeight(.light)
                    .font(.title)
                    .padding()
                    .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
            }
        }
        .foregroundColor(Color.black.opacity(0.7))
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
        .offset(x: 0, y: 0)

    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
    .background(Color.orange.opacity(0.2))
    .edgesIgnoringSafeArea(.all)

}