在SwiftUI中创建动态项目列表的步骤总结和代码演示

12 min read

步骤总结：

  1. 创建一个数据模型，用于存储项目列表信息。
  2. 在ContentView中创建一个List视图，用于展示项目列表。
  3. 在List视图中使用ForEach来动态生成项目列表的项目行。
  4. 在项目行中使用NavigationLink组件来实现项目详情的跳转。

代码演示：

以下是一个简单的动态项目列表代码演示：

import SwiftUI

struct Project: Identifiable {
    let id = UUID()
    let name: String
    let description: String
}

struct ContentView: View {
    let projects = [
        Project(name: "Project 1", description: "The first project"),
        Project(name: "Project 2", description: "The second project"),
        Project(name: "Project 3", description: "The third project")
    ]
    
    var body: some View {
        NavigationView {
            List {
                ForEach(projects) { project in
                    NavigationLink(destination: ProjectDetailView(project: project)) {
                        VStack(alignment: .leading) {
                            Text(project.name)
                                .font(.headline)
                            Text(project.description)
                                .font(.subheadline)
                                .foregroundColor(.gray)
                        }
                    }
                }
            }
            .navigationBarTitle("Projects")
        }
    }
}

struct ProjectDetailView: View {
    let project: Project
    
    var body: some View {
        VStack {
            Text(project.name)
                .font(.largeTitle)
                .fontWeight(.bold)
            Text(project.description)
                .font(.body)
                .foregroundColor(.gray)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

上述代码定义了一个Project结构体来存储项目信息，其中包括项目名称和描述，以及一个唯一的标识符id。

在ContentView中，我们定义了一个包含三个Project实例的列表数据模型projects，然后使用List和ForEach来将这个列表呈现为一个动态列表。

在ForEach中，我们定义了一个NavigationLink组件，用于实现项目详情的跳转。该组件的目标视图是ProjectDetailView，传入当前项目的实例作为参数。在项目行视图中，我们使用VStack来垂直排列项目标题和描述，同时对字体样式和颜色进行了设置。

最后，在ProjectDetailView中，我们简单地展示了项目名称和描述信息。

运行代码，可以看到一个包含三个项目的项目列表，点击任何一个项目都可以跳转到项目详情页。