Section 18 : Navigation Style and Passing Data - HH-Ge/BuildAnAppWithSwiftUI GitHub Wiki

Section 18 : Navigation Style and Passing Data - 导航样式与传递数据（9'22"）

Create a detail screen for your navigation list items.

为导航列表中的项目创建详情页。

上一节的详情只是显示了文字内容，现在建立一个包含更完整信息的视图来替代它。先创建为更新信息详情创建新的视图文件，命名为 UpdateDetail.swift。

1. 设计详情视图

代码如下

struct UpdateDetail: View {
    var update: Update =  updateData[0]                              // 设定用于传值的变量，并给默认值
    
    var body: some View {
        List {
            VStack(spacing: 20) {
                Image(update.image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: .infinity)						 // 撑满，保持图片显示统一
                Text(update.text)
                    .frame(maxWidth: .infinity, alignment: .leading) // 撑满，左对齐，保持内容显示统一
            }
            .navigationBarTitle(update.title)       // 指明导航标题，这个在这里预览不出来，需要 Navigation
        }
    .listStyle(PlainListStyle())                    // 指明 List 的样式，另一个常用的是 GroupedListStyle
    }
}

2. 修改 UpdateList 视图

struct UpdateList: View {
    var body: some View {
        NavigationView {                  // 导航视图
            List(updateData) { update in  // 更新信息列表，数据来自 updateData
                NavigationLink(destination: UpdateDetail(update: update)) { // 导航项目，目标为更新信息的详情
                    HStack {
                        // 代码略
                    }
                    .padding(.vertical, 8)
                }
            }
        .navigationBarTitle(Text("课程更新信息"))  // 导航视图的标题
        }
    }
}

现在可以看到详情页面都可以正常显示了

本节小结

本节代码请参见 GitHub 和 码云

• 在 NavigationView 中的 destination 参数里调用详情页面，注意传递参数。
• List 是与 VStack 一样的容器，但是里面的元素之间有分割线。
• listStyle 修饰器指明 List 的样式，主要参数有 Default()，PlainListStyle()，GroupedListStyle() 等。
• navigationBarTitle 修饰器需要在 NavigationView 容器中才能起作用。
• 使用 frame 和设定对齐方式来保证不同数据的详情页面在显示上保持一致。

接下来

组合视图对数据进行编辑