Swift- can't align list of movies horizontally at the top of my screen

Question

I fetched data from an API and stored it in an array to make a project on my swift app, right now im trying to make the main page where i wanna just display the movie on the screen, i was able to display them already, but not quite how i want it to.

Image . i want the movies to be just under the big title "Movies" and Im not finding a way to do it

Here's my view code:

        var body: some View {
            ScrollView(.horizontal) {
                HStack(spacing: 10) {
                    ForEach(movies) { movie in
                        NavigationLink(destination: MovieDetailsView(movie: movie)) {
                            if let url = URL(string: "https://image.tmdb.org/t/p/w500\(movie.posterPath)") {
                                AsyncImage(url: url) { image in
                                    image
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                } placeholder: {
                                    Color.gray
                                }
                                .frame(width: 100, height: 150)
                            } else {
                                Text("No movies available")
                            }
                        }
                    }
                }
                .padding(.horizontal)
            }
            .onAppear {
                fetchData()
            }
        }

this code is inside a struct called MovieListView, and this struct is inside a class called MoviesManager. Im calling this struct MovieListView inside of the ContentView like this:

struct ContentView: View {
    var body: some View {
        NavigationView {
            MoviesManager.MovieListView()
                .navigationTitle("Movies")
        }
    }
}

Hope it wasn´t much info.

I´ve tried to use Spacer() to force the movies to the top but it did not work, besides that i have not tried much.

Answer 1

To place your content on top of your screen you can set frame on the Scrollview like this:

var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
        HStack(spacing: 10) {
            ForEach(movies) { movie in
                Text(movie)
                NavigationLink(destination: MovieDetailsView(movie: movie)) {
                    if let url = URL(string: "https://image.tmdb.org/t/p/w500\(movie.posterPath)") {
                        AsyncImage(url: url) { image in
                            image
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                        } placeholder: {
                            Color.gray
                        }
                        .frame(width: 100, height: 150)
                    } else {
                        Text("No movies available")
                    }
                }
            }
        }
        .padding(.horizontal)
        .padding(.top, 20) // set padding as per your requirement
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}