SwiftUI学习笔记（二）：打造列表和导航系统——更进一步的SwiftUI应用开发

2023-12-05 15:29:53

前言

在上一篇SwiftUI学习笔记中，我们一起了解了SwiftUI的基本概念和一些简单的UI控件。本篇笔记，我们将继续深化对SwiftUI的理解，学习如何构建列表和添加导航系统，从而为iOS应用添加更丰富的内容和交互功能。

构建列表

列表是iOS应用中常见的一种UI元素，它可以用来显示一系列数据项。在SwiftUI中，构建列表非常简单，只需使用List结构体即可。

struct MyListView: View {
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List(items) { item in
            Text(item)
        }
    }
}

上面的代码创建了一个简单的列表，其中包含三个文本项。当用户点击列表中的某一项时，SwiftUI会自动调用闭包{ item in Text(item) }，并将被点击的文本项作为参数传递给闭包。

你可以通过添加ForEach循环来构建更复杂的列表。例如，下面的代码创建了一个列表，其中包含三个文本项和三个图像。

struct MyListView: View {
    let items = [
        ("Item 1", "image1.png"),
        ("Item 2", "image2.png"),
        ("Item 3", "image3.png")
    ]

    var body: some View {
        List {
            ForEach(items) { item, image in
                HStack {
                    Text(item)
                    Image(image)
                }
            }
        }
    }
}

添加导航系统

导航系统是iOS应用中另一个常见的功能。它允许用户在不同的视图之间切换。在SwiftUI中，添加导航系统也非常简单，只需使用NavigationView结构体即可。

struct MyNavigationView: View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: MyDetailView()) {
                    Text("Item 1")
                }
                NavigationLink(destination: MyDetailView()) {
                    Text("Item 2")
                }
                NavigationLink(destination: MyDetailView()) {
                    Text("Item 3")
                }
            }
            .navigationBarTitle("My List")
        }
    }
}

上面的代码创建了一个简单的导航系统，其中包含三个导航链接。当用户点击导航链接时，SwiftUI会自动将用户导航到相应的视图。

你可以通过添加NavigationStack结构体来创建更复杂的导航系统。例如，下面的代码创建了一个导航系统，其中包含一个主视图和一个详情视图。

struct MyNavigationView: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink(destination: MyDetailView()) {
                    Text("Item 1")
                }
                NavigationLink(destination: MyDetailView()) {
                    Text("Item 2")
                }
                NavigationLink(destination: MyDetailView()) {
                    Text("Item 3")
                }
            }
            .navigationBarTitle("My List")
            .navigationDestination(for: MyDetailView.self) {
                MyDetailView()
            }
        }
    }
}