SwiftUI基础：List+ ForEach以及初步认识NavigationView、NavigationStack

SwiftUI基础：List + ForEach 以及初步认识 NavigationView 和 NavigationStack

本节目标

在上节中，我们已经初步了解了SwiftUI List的基础用法

在本节中，我们将继续学习如何使用 List 和 ForEach 来展示数据列表，并初步认识 导航栏NavigationView 和 NavigationStack

我们最终要实现的效果：

一、 List + ForEach 基本使用

List 是用来展示可滚动的列表视图，而 ForEach 是用来遍历数据并生成相应的视图。我们可以结合这两个组件来显示动态数据列表。

1. 代码示例：

import SwiftUI

struct ContentView: View {
   
   
    /// 数据源，存储水果名称
    @State private var items = ["苹果", "香蕉", "橙子", "葡萄", "西瓜"]

    var body: some View {
   
   
        VStack {
   
   
            List {
   
   
                /// 使用 ForEach 循环绑定数据源
                ForEach(items, id: \.self) {
   
    item in
                    HStack {
   
   
                        Text(item)  // 显示水果名称
                        Spacer()    // 占据剩余空间，将文本和其他元素分隔
                    }
                }
            }
        }
    }
}

#Preview {
   
   
    ContentView()
}

2.为什么要使用ForEach

之前的节程直接使用List就可以实现，为什么我们还要用ForEach呢？

在 SwiftUI 中，List 可以单独使用，也可以和 ForEach 配合使用。这两种方式各有优缺点，具体选择取决于需求和场景。

List的特点：

List 是一个容器视图，专门用于展示一组数据，它可以直接接收一个数据源并渲染每个数据项的视图。会自动生成每个数据项的视图，通常配合ForEach 来实现动态数据渲染，尤其是在数据项数量不确定的情况下

ForEach的特点：

ForEach 是一个用于在视图中循环迭代数据并生成对应视图的结构。它通常用于嵌套在 List或其他容器视图中。不会直接展示列表，而是通过指定数据源来渲染每个元素

通过特性对比，我们可以发现二者之间比较明显的差异。

List更适合数据结构简单、无需插入其他视图或对列表进行复杂处理 的场景