Why can't I get text to appear at top of view.

Question

Created May ’24

Replies 3

Boosts 0

Participants 3

No matter what I have tried, I can't get my test "What would you like to do?" to appear at the top of the screen. What have I missed? Is something g to do with the ZStack?

import SwiftUI
import SwiftData

struct ContentView: View {
    
    @Environment(\.modelContext) private var context
    @Query private var readings: [Readings]
    @State private var readingTimeStamp: Date = Date()
    
    var body: some View {
        ZStack {
            Image("IPhone baqckgound 3")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .padding(.top, 40)
            VStack {
                Text("What would you like to do?")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .padding()
            Spacer()
            
        }
    }
    
}

Boost

Answer 1

darkpaw OP

May ’24

It looks like your Spacer() should be inside the VStack, after the Text.

You're currently telling SwiftUI to display a background image, then on top of that (because of the ZStack), display Text inside a VStack, but your Text is the only thing in the VStack so it just sits there in the centre.

Then you're saying have a Spacer(), but this is inside the ZStack so it isn't pushing the Text up, it's just layered on top of the VStack. The way to fix it is to put the Spacer() in the VStack.

You can see this clearly if you change your Spacer() to something like:

Rectangle()
  .fill(Color.green)
  .frame(width: 100, height: 50)

Let's see what it does in the different formats:

		ZStack {
			VStack {
				Text("What would you like to do?")
					.font(.title)
					.fontWeight(.bold)
			}
			.padding()
// -- Outside of the VStack, as you currently have it:
			Rectangle()
				.fill(Color.green)
				.frame(width: 100, height: 50)
//			Spacer()
		}

So, here, your Spacer() (the Rectangle()) is where your current Spacer() is, and it produces this:

Screenshot 2024-05-18 at 22.22.06.png

Now, moving the Spacer/Rectangle inside the VStack:

		ZStack {
			VStack {
				Text("What would you like to do?")
					.font(.title)
					.fontWeight(.bold)
// -- Inside the VStack:
				Rectangle()
					.fill(Color.green)
					.frame(width: 100, height: 50)
//				Spacer()
			}
			.padding()
		}

And it looks like this:

Screenshot 2024-05-18 at 22.22.20.png

So, using a Spacer() inside the VStack does this:

Screenshot 2024-05-18 at 22.24.12.png

0

Answer 2

jamesm46 OP

May ’24

Thank you so much darkpaw for your extremely well-explained and thorough answer from which I learned about what a Spacer() is, I am an *****, I thought I had tried that but obviously not.

1

Answer 3

DTS Engineer OP

Apple

May ’24

@darkpaw Also keep in mind that a ZStack assigns each successive subview a higher z-axis value and you can use an Alignment to set the x- and y-axis coordinates of each subview. By default ZStack uses a center alignment.

struct ContentView: View {
    
    var body: some View {
        ZStack(alignment: .top) {
            Image(systemName: "star")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .padding(.top, 40)
            VStack {
                Text("What would you like to do?")
                    .font(.title)
                    .fontWeight(.bold)
            }
            .padding()
        }
    }
}

and you can use the zIndex modifierr to controls the display order of the overlapping views.

0