Trying to set up a scrollable view with multiple multiline of text but when app is run, it is running very slow when scrolling

Question

I am trying to set up an Instructions view that will show the instructions to run my app via text (for those who don't quite understand how it works and need step by step instructions).

I wrote the following code, but when I ran it, it ran very slow when I opened this particular view and the scrolling was very slow until it just didn't do anything, like a crash without crashing.

My code:

NavigationView {
        ScrollView {
            LazyVStack(alignment: .leading) {
                padding()
                Text("Main Screen")
                    .font(.title2)
                    .foregroundColor(.purple)
                Text("This is the description text for the Main Screen")
                    .padding(.all)
                    .font(.title3)
                    .foregroundColor(.pink)
            }.padding(.leading)

            LazyVStack(alignment: .leading) {
                Text("Log In")
                    .font(.title2)
                    .foregroundColor(.purple)
                Text("This is the description text for the Login")
                    .padding(.all)
                    .font(.title3)
                    .foregroundColor(.pink)
                padding()
            }.padding(.leading)

            LazyVStack(alignment: .leading) {
                Text("Workout")
                    .font(.title2)
                    .foregroundColor(.purple)
                Text("This is the description text for Workouts.")
                    .padding(.all)
                    .font(.title3)
                    .foregroundColor(.pink)
                padding()
            }.padding(.leading)

            LazyVStack(alignment: .leading) {
                Text("Logout")
                    .font(.title2)
                    .foregroundColor(.purple)
                Text("This is the description text for Logout")
                    .padding(.all)
                    .font(.title3)
                    .foregroundColor(.pink)
                padding()
            }
            .padding(.leading)

            LazyVStack(alignment: .leading) {
                Text("Settings")
                    .font(.title2)
                    .foregroundColor(.purple)
                Text("This is the description text for Settings")
                    .padding(.all)
                    .font(.title3)
                    .foregroundColor(.pink)
                padding()
            }
            .padding(.leading)


        }
        .navigationTitle("Instructions")
    }

The code I had, had a lot more code in the 'description text' than is above and each new category or title consisted of a new LazyVStack block with a set of 2 Texts, as above. The entire view should consists of 8-10 LazyVStack blocks.

Below is a diagram of what I am trying to do:

Basically, I am just trying to create a scrollable view that just contains text with a title and a description of the title below it. There will be up to 10 titles and descriptions - all text.

What am I doing wrong and how I can fix this?

Answer 1

I think the problem is with your padding()s. try removing them.

You should add padding to your views like this:

Text("content")
.padding()

as you can see in the documentation, padding(_) is a view modifier and should be called on a View.

to add extra space between your components, you can do either:

1- set the space between components of your LazyVStack by passing spacing like this:

LazyVStack(alignment: .leading, spacing: 32) { // <- spacing
                    Text("Main Screen")
                        .font(.title2)
                        .foregroundColor(.purple)
                    Text("This is the description text for the Main Screen")
                        .padding(.all)
                        .font(.title3)
                        .foregroundColor(.pink)
                }.padding(.leading)

2- or set the top padding by using padding(_, _) modifier:

LazyVStack(alignment: .leading) {
                    Text("Main Screen")
                        .font(.title2)
                        .foregroundColor(.purple)
                        .padiing(.top, 32)     // <-- padding
                    Text("This is the description text for the Main Screen")
                        .padding(.all)
                        .font(.title3)
                        .foregroundColor(.pink)
                        .padding(.top, 32)    //  <-- padding 
                }.padding(.leading)