尝试设置具有多个多行文本的可滚动视图，但是当应用程序为 运行 时，滚动时 运行ning 非常慢

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

我的代码 'description text' 中的代码比上面的多很多，每个新类别或标题都包含一个新的 LazyVStack 块和一组 2 个文本，如上所述。整个视图应该由 8-10 个 LazyVStack 块组成。

下面是我正在尝试做的事情的图表：

基本上，我只是想创建一个可滚动的视图，其中只包含带有标题的文本和标题下方的描述。最多将有 10 个标题和描述 - 所有文本。

知道吗，我做错了什么以及如何解决这个问题？

Answer 1

我认为问题出在您的 padding() 上。尝试删除它们。

您应该像这样在您的视图中添加填充：

Text("content")
.padding()

如您在 documentation 中所见，padding(_) 是一个视图修饰符，应该在 View.

上调用

要在您的组件之间添加额外的 space，您可以执行以下任一操作：

1- 通过像这样传递 spacing 来设置 LazyVStack 组件之间的 space：

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)