Попытка настроить прокручиваемый вид с несколькими многострочными текстами, но когда приложение запущено, оно работает очень медленно при прокрутке

Question

Я пытаюсь настроить представление инструкций, в котором будут отображаться инструкции по запуску моего приложения в виде текста (для тех, кто не совсем понимает, как оно работает, и нуждается в пошаговых инструкциях).

Я написал следующий код, но когда я запустил его, он работал очень медленно, когда я открывал это конкретное представление, и прокрутка была очень-очень медленной, пока она просто ничего не делала, например, сбой без сбоя.

Мой код:

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

Код, который у меня был, имел намного больше кода в «тексте описания», чем указано выше, и каждая новая категория или заголовок состояла из нового блока LazyVStack с набором из 2 текстов, как указано выше. Все представление должно состоять из 8-10 блоков LazyVStack.

Ниже приведена схема того, что я пытаюсь сделать:

По сути, я просто пытаюсь создать прокручиваемое представление, которое просто содержит текст с заголовком и описанием заголовка под ним. Будет до 10 заголовков и описаний — все текстовые.

Любая идея, что я делаю неправильно и как я могу это исправить?

Answer 1

я думаю проблема в тебе padding()с. попробуйте удалить их.

Вы должны добавить отступы к своим представлениям следующим образом:

      Text("content")
.padding()

как вы можете видеть в документации , padding(_)является модификатором представления и должен вызываться на View.

чтобы добавить дополнительное пространство между вашими компонентами, вы можете сделать следующее:

1- установите расстояние между компонентами вашего LazyVStackпроходя мимо spacingкак это:

      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- или установите верхний отступ с помощью padding(_, _)модификатор:

      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)