0

我正在尝试设置一个说明视图，该视图将显示通过文本运行我的应用程序的说明（对于那些不太了解它的工作原理并需要逐步说明的人）。

我写了下面的代码，但是当我运行它时，当我打开这个特定的视图时它运行得非常慢，并且滚动非常非常慢，直到它什么也没做，就像没有崩溃的崩溃一样。

我的代码：

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

我拥有的代码在“描述文本”中的代码比上面的要多得多，并且每个新类别或标题都由一个带有一组 2 个文本的新 LazyVStack 块组成，如上所述。整个视图应该由 8-10 个 LazyVStack 块组成。

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

仅带有文本的可滚动视图

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

任何想法，我做错了什么以及如何解决这个问题？

4

1 回答 1

1

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

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

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)
于 2021-01-05T23:42:04.727 回答