2
votes

I'am developing an app with swift ui. It's a single View App. But I have a problem with the scrollView

I have tried to delete the scrollview but it didn't change anything. I always have this big white problem on the top of my view.

https://imgur.com/a/BiWy0fe


import SwiftUI

struct Redactor {
    var id: Int
    let name, imageURL, since, bio: String
}

struct Article {
    var id: Int
    let name, image, content, redactor: String
}


struct MainScreenView: View {

    let redactors:[Redactor] = [...]

    let articles:[Article] = [...]

    var body: some View {

        NavigationView {
            ScrollView(.vertical, showsIndicators: true) {
                VStack(alignment: .leading) {
                ScrollView(.horizontal, showsIndicators: false) {
                        HStack(alignment: .top, spacing: 20) {
                            ForEach(redactors, id: \.id) { Redactor in
                                NavigationLink(destination: MainRedactorView(redactor: Redactor)) {
                                    RedactorView(redactor: Redactor)

                                }
                            }
                        }.padding(.leading, 15)
                }.padding(.top, 10)

                VStack(alignment: .leading) {
                    Text("Les Dernières nouvelles :")
                        .font(.title)
                        .fontWeight(.bold)
                        .padding(.leading, 15)
                        .padding(.top, 20)

                    ForEach(articles, id: \.id) { Article in
                        ArticleView(article: Article)
                    }
                }
                }
            }
            .navigationBarTitle(Text("The News Place"))
                }


        }
    }


struct RedactorView: View {

    let redactor : Redactor

    var body : some View {
            VStack {
                Image(redactor.imageURL)
                    .resizable()
                    .frame(width: 150, height: 150)
                    .aspectRatio(contentMode: .fill)
                    .cornerRadius(75)
                Text(redactor.name)
                    .font(.subheadline)
                    .fontWeight(.bold)
        }
        }
    }

struct ArticleView: View {
    var article: Article

    var body: some View {
        VStack (alignment: .leading) {
            Image(article.image)
                .renderingMode(.original)
                .resizable()
                .cornerRadius(10)
                .aspectRatio(contentMode: .fit)

                Text(article.name)
                    .font(.title)
                    .fontWeight(.bold)
                Text("Le Rondeau Mag'")
                    .font(.subheadline)
                    .foregroundColor(.red)
                Text(article.content)
                    .font(.body)
                    .lineLimit(5)
                    .foregroundColor(.secondary)

        }.padding()
    }
}

I would like to delete this white blank on the top of my scroll view. Thank you

2

2 Answers

1
votes

Is the NavigationView that's creating the white space on top. Try with

.navigationBarTitle(Text("The News Place"), displayMode: .inline)

and see if the white space disappears.

1
votes

Did you try deleting the VStack inside ScrollView? ScrollView already defines an implicit stack.

A good way to know which element causes the blank space is applying .border(Color.red) to different views.

Hope this helps.