SwiftUI六组合复杂用户界面

代码下载

应用的首页是一个纵向滚动的地标类别列表，每一个类别内部是一个横向滑动列表。随后将构建应用的页面导航，这个过程中可以学习到如果组合各种视图，并让它们适配不同的设备尺寸和设备方向。

下载起步项目并跟着本篇教程一步步实践，或者查看本篇完成状态时的工程代码去学习，项目文件。

添加一个首页视图

已经创建了所有在应用中需要的视图，现在给应用创建一个首页视图，把之前创建的视图整合起来。首页不仅仅包含之前创建的视图，它还提供页面间导航的方式，同时也可以展示各种地标信息。

创建一个名为CategoryHome.swift的自定义视图文件，添加NavigationSplitView，这个NavigationSplitView将会容纳应用中其它不同的视图。配合使用NavigationLink及相关的修改器，就可以构建出应用的页面间导航结构，设置导航栏标题为Featured：

struct CategoryHome: View {var body: some View {NavigationSplitView {Text("Hello, World!").navigationTitle("Featured")} detail: {Text("Select a Landmark")}}
}

创建地标类别列表

应用为了便于用户浏览各种类别的地标，将地标按类别竖向排列形成列表视图，对于每一个类别内的具体地标，又把它们按照水平方向排列，形成横向列表。组合使用垂直栈(vertical statck)和水平栈(horizontal stack)并给列表添加滚动。

首先从landmarkData.json文件读取类别数据。

1、在Landmark中，向Landmark结构添加Category枚举和category属性。landmarkData文件已经为每个地标数据包含了一个category值，该类别值为三个字符串值之一。通过匹配数据文件中的名称，可以让结构体遵守Codable协议来加载数据：

struct Landmark: Hashable, Codable, Identifiable {var id: Intvar name: Stringvar park: Stringvar state: Stringvar description: Stringvar isFavorite: Boolvar category: Categoryenum Category: String, CaseIterable, Codable {case lakes = "Lakes"case rivers = "Rivers"case mountains = "Mountains"}private var imageName: Stringvar image: Image {Image(imageName)}private var coordinates: Coordinatesvar locationCoordinate: CLLocationCoordinate2D {CLLocationCoordinate2D(latitude: coordinates.latitude,longitude: coordinates.longitude)}struct Coordinates: Hashable, Codable {var latitude: Doublevar longitude: Double}
}

2、在ModelData中，添加一个categories计算字典，使用Dictionary结构体的初始化方法init(grouping:by:)，把地标数据的类别属性category传入作为分组依据，可以把地标数据按类别分组：

class ModelData {var landmarks: [Landmark] = load("landmarkData.json")var hikes: [Hike] = load("hikeData.json")var categories: [ String: [Landmark] ] {Dictionary(grouping: landmarks) { $0.category.rawValue }}
}

3、在CategoryHome中创建一个modelData属性。现在需要访问categories，稍后还需要访问其他landmark数据。使用List显示地标数据的类别。Landmark.Category是枚举类型，它的值标识列表中每一种类别，可以保证类别不会有重复定义：

struct CategoryHome: View {@Environment(ModelData.self) var modelData: ModelDatavar body: some View {NavigationSplitView {List {ForEach(modelData.categories.keys.sorted(), id: \.self) { key inText(key)}}.navigationTitle("Featured")} detail: {Text("Select a Landmark")}}
}#Preview {CategoryHome().environment(ModelData())
}

创建地标行

Landmarks在水平滚动的一行中显示每个类别。添加一个新的视图类型来表示行，然后在新视图中显示该类别的所有地标。

重用在创建和组合视图中创建的Landmark视图的部分，以创建熟悉的Landmark预览。

1、创建一个名为CategoryItem的新自定义视图，显示一个地标：

struct CategoryItem: View {var landmark: Landmarkvar body: some View {VStack(alignment: .leading) {landmark.image.resizable().frame(width: 155, height: 155).cornerRadius(5)Text(landmark.name).font(.caption)}.padding(.leading, 15)}
}#Preview {CategoryItem(landmark: ModelData().landmarks[0])
}

2、定义一个新的视图类型CategoryRow，用来展示地标类别行的内容。新建行视图需要存放地标具体类别的展示数据。在CategoryRow.swift中将类别的条目放入HStack中，并将其与类别名称分组到VStack中。为行内容指定一个高度，并把行内容嵌入到ScrollView中，以支持横向滑动。预览视图时，可以多增加几个地标数据，用来查看列表的滑动是否正常：

struct CategoryRow: View {var categoryName: Stringvar items: [Landmark]var body: some View {VStack(alignment: .leading) {Text(categoryName).font(.headline).padding(.leading, 15).padding(.top, 5)ScrollView(.horizontal, showsIndicators: false) {HStack(alignment: .top, spacing: 0) {ForEach(items) { landmark inCategoryItem(landmark: landmark)}}}.frame(height: 185)}}
}#Preview {let landmarks = ModelData().landmarksreturn CategoryRow(categoryName: landmarks[0].category.rawValue, items: Array(landmarks.prefix(3)))
}

完成类别视图

将行和特色地标图像添加到类别主页。

1、更新CategoryHome的body，将类别信息传递给行类型的实例：

接下来，在视图的顶部添加一个特色地标。要做到这一点，需要从地标数据中获得更多信息。

2、在Landmark中，添加一个新的isFeatured属性，与添加的其他地标属性一样，这个布尔值已经存在于数据中，只需要声明一个新属性：

struct Landmark: Hashable, Codable, Identifiable {var id: Intvar name: Stringvar park: Stringvar state: Stringvar description: Stringvar isFavorite: Boolvar isFeatured: Boolvar category: Categoryenum Category: String, CaseIterable, Codable {case lakes = "Lakes"case rivers = "Rivers"case mountains = "Mountains"}private var imageName: Stringvar image: Image {Image(imageName)}private var coordinates: Coordinatesvar locationCoordinate: CLLocationCoordinate2D {CLLocationCoordinate2D(latitude: coordinates.latitude,longitude: coordinates.longitude)}struct Coordinates: Hashable, Codable {var latitude: Doublevar longitude: Double}
}

3、在ModelData中，添加一个新的计算特色地标数组，其中只包含将isFeatured设置为true的地标：

class ModelData {var landmarks: [Landmark] = load("landmarkData.json")var hikes: [Hike] = load("hikeData.json")var categories: [ String: [Landmark] ] {Dictionary(grouping: landmarks) { $0.category.rawValue }}var features: [Landmark] {landmarks.filter { $0.isFeatured }}
}

4、在CategoryHome中，将第一个特色地标的图像添加到列表的顶部。在后面的教程中，会将这个视图修改成一个交互式轮播图。目前，这个视图仅仅展示一张缩放和剪裁后的地标图片。把视图的边距设置为0，让展示内容可以尽量贴着屏幕边沿：

struct CategoryHome: View {@Environment(ModelData.self) var modelData: ModelDatavar body: some View {NavigationSplitView {List {modelData.features[0].image.resizable().frame(height: 200).clipped().listRowInsets(EdgeInsets())ForEach(modelData.categories.keys.sorted(), id: \.self) { key inCategoryRow(categoryName: key, items: modelData.categories[key] ?? [])}.listRowInsets(EdgeInsets())}.navigationTitle("Featured")} detail: {Text("Select a Landmark")}}
}

在各节之间添加导航

现在所有类别的地标都可以在首页视图中展示出来，用户还需要能够进入应用其它页面的方法。使用页面导航和相关API来实现用户从应用首页到地标详情页、收藏列表页及用户个人中心页的跳转。

1、在CategoryRow.swift中，把CategoryItem视图包裹在NavigationLink视图中。CategoryItem这时做为跳转按钮的内容，destination指定点击NavigationLink按钮时要跳转的目标视图：

struct CategoryRow: View {var categoryName: Stringvar items: [Landmark]var body: some View {VStack(alignment: .leading) {Text(categoryName).font(.headline).padding(.leading, 15).padding(.top, 5)ScrollView(.horizontal, showsIndicators: false) {HStack(alignment: .top, spacing: 0) {ForEach(items) { landmark inNavigationLink(destination: LandmarkDetail(landmark: landmark)) {CategoryItem(landmark: landmark)}}}}.frame(height: 185)}}
}

2、使用renderingMode(:)和foregroundColor(:)这两个属性修改器来改变地标类别项的导航样式。做为NavigationLink标签的CategoryItem中的文本会使用Environment中的强调颜色，图片可能以模板图片的方式渲染，这些都可以使用属性修改器来调整，达到最佳效果：

struct CategoryItem: View {var landmark: Landmarkvar body: some View {VStack(alignment: .leading) {landmark.image.renderingMode(.original).resizable().frame(width: 155, height: 155).cornerRadius(5)Text(landmark.name).foregroundStyle(.primary).font(.caption)}.padding(.leading, 15)}
}

3、接下来，将修改应用程序的ContentView，以显示一个TabView，让用户在刚刚创建的类别视图和现有的地标列表之间进行选择：

• 切换到ContentView并添加要显示的选项卡枚举。为选项卡选择添加一个状态变量，并给它一个默认值。
• 创建一个TabView来包装LandmarkList和新的CategoryHome。每个视图上的 tag(_😃 修饰符匹配选择属性可以取的一个可能值，因此当用户在用户界面中进行选择时，TabView可以协调显示哪个视图。
• 给每个Tab一个标签。确保实时预览打开，并尝试新的导航。

struct ContentView: View {@State private var selection: Tab = .featuredenum Tab {case featuredcase list}var body: some View {TabView(selection: $selection) {CategoryHome().tabItem { Label("Featured", systemImage: "star") }.tag(Tab.featured)LandmarkList().tabItem { Label("List", systemImage: "list.bullet") }.tag(Tab.list)}}
}#Preview {ContentView().environment(ModelData())
}