SwiftUI List那些事(二）给 List 添加跳转事件

列表通常用来展示概览信息，然后点击进入详情。

我们可以给List 添加给导航控制视图 NavigationView ，Row 添加NavigationLink 添加跳转目标地址

谷歌翻译文档
使用 NavigationView 创建基于导航的应用程序，用户可以在其中遍历视图集合。用户通过选择您提供的 NavigationLink 导航到目标视图。在 iPadOS 和 macOS 上，目标内容显示在下一栏中。其他平台将新视图推送到堆栈上，并使用特定于平台的控件（如后退按钮或滑动手势）从堆栈中删除项目。

我们先创建个用户详情页，只显示用户姓名

//
//  DetailView.swift
//  List
//
//  Created by lsr on 2021/9/16.
//

import SwiftUI

struct DetailView: View {
    var item:StudentModel
    var body: some View {
        Text(item.name)
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView(item: dataSource[0])
    }
}

然后在添加列表添加NavigationView和NavigationLink

//
//  ContentView.swift
//  List
//
//  Created by lsr on 2021/9/15.
//

import SwiftUI

//创建学生对象
struct StudentModel:Identifiable {
    let id = UUID() //学生id
    let name:String //学生姓名
    let age:String  //学生年龄
    let avatar:String
}

//列表数据源
let dataSource = [
    StudentModel(name:"李雷",age:"8",avatar:"lilei"),
    StudentModel(name:"露西",age:"7",avatar: "luc"),
    StudentModel(name:"小明",age:"7",avatar:"xiaom")
]

struct ContentView: View {
    var body: some View {
        //导航视图
        NavigationView {
            //列表
            List(dataSource){ item in
                //跳转Link 目标是DetailView 详情
                NavigationLink(
                    destination:DetailView(item: item)) {
                HStack(spacing:15, content: {
                    Image(item.avatar).resizable().frame(width:50,height:50)
                    VStack(alignment: .leading, spacing: 10, content: {
                       let name = "姓名:" + item.name
                       Text(name)
                       let age = "年龄:" + item.age
                        Text(age).foregroundColor(.gray).font(.system(size:16))
                    }).frame(height:50)
                })
             }
            }.navigationTitle("人员管理")
          }
    }
}

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

最终效果如下