- 导航视图和列表（11’48"）

Build a table view with navigation options and presentations in SwiftUI.

在 SwiftUI 中使用导航选项和展示创建表格视图。

这一节内容依旧比较短，先新建一个 UpdateList.swift 文件。

1. 给导航视图创建数据模型

在 UpdateList 文件的末尾添加如下代码

// 模型
struct Update: Identifiable {
    var id = UUID()
    var image: String
    var title: String
    var text: String
    var date: String
}
// 数据
let updateData = [
    Update(image: "Card1", title: "SwiftUI 进阶", text: "使用 API 数据、包和 CMS 等高阶技术将 SwiftUI app 发布到 App Store", date: "10月17日"),
    Update(image: "Card2", title: "Webflow", text: "使用高级互动、支付和 CMS 设计高度转换加载页面和制作动画", date: "12月31日"),
    Update(image: "Card3", title: "ProtoPie", text: "为移动端和网络端制作带有高级动画和交互的原型", date: "8月21日"),
    Update(image: "Card4", title: "SwiftUI", text: "使用 Xcode 11 对自定义UI、动画、手势和组件进行编程", date: "3月9日"),
    Update(image: "Card5", title: "Framer Playground", text: "使用 Framer X 代码编辑器创建强大的动画和交互", date: "11月11日"),
    Update(image: "Card6", title: "测试一个内容比较长的", text: "红军不怕远征难，万水千山只等闲。五岭逶迤腾细浪，乌蒙磅礴走泥丸。金沙水拍云崖暖，大渡桥横铁索寒。更喜岷山千里雪，三军过后尽开颜。", date: "10月1日")
]

2. 建立导航视图

很简单，直接上代码了

NavigationView {                                                    // 导航视图
    List(updateData) { update in                                    // 更新信息列表，数据来自 updateData
		NavigationLink(destination: Text(update.text)) {            // 导航项目，目标为更新信息的详情
            HStack {
                Image(update.image)                                 // 使用数据中的属性
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 80, height: 80)
                    .background(Color.black)
                    .cornerRadius(20)
                    .padding(.trailing, 4)
                VStack(alignment: .leading, spacing: 8) {
                    Text(update.title)
                    	.font(.system(size: 20, weight: .bold))
                    Text(update.text)
                        .lineLimit(2)
                        .font(.subheadline)
                    	.foregroundColor(
                            Color(#colorLiteral(red: 0.501960814, 
                                                green: 0.501960814, 
                                                blue: 0.501960814, alpha: 1)
                                 )
                        )
                    Text(update.date)
                        .font(.caption)
                        .fontWeight(.bold)
                        .foregroundColor(.secondary)
                        }
                    }
                    .padding(.vertical, 8)
                }
            }
        .navigationBarTitle(Text("课程更新信息"))                                     // 导航视图的标题
        }
    }
}

这样就完成了一个导航视图，页面顶端是 navigationBarTitle 修饰所给的标题。每条信息的概要在一行上显示，行末有 > 按钮，点击可以跳转到详情。详情页面有导航标题作为返回按钮。超过屏幕的部分可以向上滚动后显示。概要和详情相互切换时有内置的动画。下面是 NavigationLink 默认的创建代码。

NavigationLink(destination: Text("Destination")) {	// 目标文字
	Text("Navigate")								// 导航视图
}
//TODO：如果目标是视图该怎么办？

现在只是初步认识了导航视图，后面会陆续增加更深入的内容。

本节小结

本节代码请参见 GitHub 和 码云

  • NavigationView 负责包裹导航视图的内容
  • List 负责包裹一个列表
  • NavigationLink 负责包裹一个导航项目，其中 destination 指明目的显示内容，后面的尾随闭包是导航条的内容
  • navigationBarTitle 指明了组件的导航标题，注意这个修饰是加在 NavigationView 里面的组件上的，不是加在 NavigationView 上。
  • 重复练习了 数据模型，数据引用，颜色字面量和其他一些修饰器。
接下来

导航样式