Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

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

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()
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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()
    }
}

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search