Why is my Text view aligned to the top, but my ScrollView is aligned to the center?

Viewed 71

I am trying to put a scrollable horizontal list at the top of the screen stacked on top of the map. I can put a Text view there, but when I try to put a ScrollView there, it stays in the center. What am I doing wrong? enter image description here

My Code

//
//  TestUIFile.swift
//

import SwiftUI
import MapKit

struct TestUIFile: View {
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))

    var body: some View {
        
        ZStack(alignment: .top) {
    
            
            Map(coordinateRegion: $region)
            
            Text("Why am I at the top?")

            //but I am in the center?
            ScrollView(.horizontal) {
                        LazyHStack {
                            ForEach(0...50, id: \.self) { index in
                                Text(String(index))
                            }
                        }
                
            }
        }
        
    }
}

struct TestUIFile_Previews: PreviewProvider {
    static var previews: some View {
        TestUIFile()
    }
}

2 Answers

I figured it out.

//
//  TestUIFile.swift
//

import SwiftUI
import MapKit

struct TestUIFile: View {
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))

    var body: some View {
        
        ZStack(alignment: .top) {
    
            
            Map(coordinateRegion: $region)
            
            //but I am in the center?
            ScrollView(.horizontal) {
                        LazyHStack {
                            ForEach(0...50, id: \.self) { index in
                                
                                
                                Text(String(index))
                            }
                        }.frame(width: .infinity, height: 100, alignment: .top)
                        
                
            }
        }
        
    }
}

struct TestUIFile_Previews: PreviewProvider {
    static var previews: some View {
        TestUIFile()
    }
}

scrollable horizontal list at the top of the screen stacked on top of the map

This is a vertical layout, so you should be using VStack, not ZStack.

struct TestUIFile: View {
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))
    
    var body: some View {

        VStack { /// here!
            Text("Why am I at the top?")
            
            ScrollView(.horizontal) {
                LazyHStack {
                    ForEach(0...50, id: \.self) { index in
                        Text(String(index))
                    }
                }
            }
            .fixedSize(horizontal: false, vertical: true) /// prevent growing too tall
            
            Map(coordinateRegion: $region)
        }
    }
}

Result:

Text, horizontal scroll view, map stacked vertically
Related