How to move vstack at top of the screen in swiftui?

Question

how to move this stack top of the screen in swiftUI. below my code there. [1]: https://i.stack.imgur.com/wBD2c.png

Post the code in your question, not pictures of code. Actual code can be cut and pasted and tried easily without retyping. Also, actual code can be searched, but pictures can't. — vacawama, Oct 16 '20 at 02:58

score 1 · Answer 1 · edited Oct 16 '20 at 15:51

You can remove the HStack and place the Spacer() within your VStack which will force the view to the top.

var body: some View {
    VStack {
        Text("Hello World")
        Text("Test")
        Spacer()
    }
}

Or if you want to keep the View to the left of the screen you can use another VStack and Spacer()

var body: some View {
    VStack {
        HStack {
            VStack {
                Text("Hello World")
                Text("Test")
                Spacer()
            }
            Spacer()
        }
    }
}

If you are just getting started with SwiftUI I highly recommend Paul Hudson's 100 Days of SwiftUI. It's free and will teach you a lot about SwiftUI.

You don't actually need the top VStack. – pawello2222 Oct 16 '20 at 15:55 — pawello2222, Oct 16 '20 at 15:55

score 1 · Answer 2 · answered Oct 16 '20 at 07:05

1

You just need to add Spacer() & embed your view in VStack & HStack to force push the view to the top.

VStack {

   VStack {
        //Your VStack 
    }
    
    Spacer()
}

answered Oct 16 '20 at 07:05

Navemics

51
6

score 0 · Answer 3 · answered Jul 25 '23 at 07:40

You can apply max frame with alignment for the container or to the child view directly.

    VStack {
        Text("Hello world")
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)

   Text("Hello, World!").frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)

How to move vstack at top of the screen in swiftui?

3 Answers3

Linked