版本記錄

前言

今天翻閱蘋果的API文檔，發現多了一個框架SwiftUI，這里我們就一起來看一下這個框架。感興趣的看下面幾篇文章。
1. SwiftUI框架詳細解析 （一） —— 基本概覽（一）
2. SwiftUI框架詳細解析 （二） —— 基于SwiftUI的閃屏頁的創建（一）
3. SwiftUI框架詳細解析 （三） —— 基于SwiftUI的閃屏頁的創建（二）
4. SwiftUI框架詳細解析 （四） —— 使用SwiftUI進行蘋果登錄（一）
5. SwiftUI框架詳細解析 （五） —— 使用SwiftUI進行蘋果登錄（二）
6. SwiftUI框架詳細解析 （六） —— 基于SwiftUI的導航的實現（一）

源碼

1. Swift

首先看下代碼組織結構

下面就是源碼了

1. SceneDelegate.swift

import UIKit
import SwiftUI

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
  var window: UIWindow?

  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    // Create the SwiftUI view that provides the window contents.
    let contentView = ContentView()
//    let contentView = ArtTabView()

    // Use a UIHostingController as window root view controller.
    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: contentView)
        self.window = window
        window.makeKeyAndVisible()
    }
  }
}

2. ContentView.swift

import SwiftUI

struct ContentView: View {
//  let disciplines = ["statue", "mural", "plaque", "statue"]
  @State var artworks = artData
  @State private var hideVisited = false
  
  var showArt: [Artwork] {
    hideVisited ? artworks.filter { $0.reaction == "" } : artworks
  }

  private func setReaction(_ reaction: String, for item: Artwork) {
    if let index = artworks.firstIndex(
      where: { $0.id == item.id }) {
      artworks[index].reaction = reaction
    }
  }

  var body: some View {
    NavigationView {
      List(showArt) { artwork in
        NavigationLink(
        destination: DetailView(artwork: artwork)) {
          Text("\(artwork.reaction)  \(artwork.title)")
            .onAppear() { artwork.load() }
            .contextMenu {
              Button("Love it: ??") {
                self.setReaction("??", for: artwork)
              }
              Button("Thoughtful: ??") {
                self.setReaction("??", for: artwork)
              }
              Button("Wow!: ??") {
                self.setReaction("??", for: artwork)
              }
          }
        }
      }
      .navigationBarTitle("Artworks")
      .navigationBarItems(trailing:
        Toggle(isOn: $hideVisited, label: { Text("Hide Visited") }))
      
      DetailView(artwork: artworks[0])
    }
  }
}

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

3. ArtTabView.swift

import SwiftUI

struct ArtTabView: View {
  @State var artworks = artData
  
  var body: some View {
    TabView {
      NavigationView {
        ArtList(artworks: $artworks, tabTitle: "All Artworks", hideVisited: false)
        DetailView(artwork: artworks[0])
      }
      .tabItem({
        Text("Artworks ?? ?? ??")
      })
      
      NavigationView {
        ArtList(artworks: $artworks, tabTitle: "Unvisited Artworks", hideVisited: true)
        DetailView(artwork: artworks[0])
      }
      .tabItem({ Text("Unvisited Artworks") })
    }
  }
}

struct ArtTabView_Previews: PreviewProvider {
  static var previews: some View {
    ArtTabView()
  }
}

struct ArtList: View {
  @Binding var artworks: [Artwork]
  let tabTitle: String
  let hideVisited: Bool
  
  var showArt: [Artwork] {
    hideVisited ? artworks.filter { $0.reaction == "" } : artworks
  }
  
  private func setReaction(_ reaction: String, for item: Artwork) {
    if let index = artworks.firstIndex(
      where: { $0.id == item.id }) {
      artworks[index].reaction = reaction
    }
  }
  
  var body: some View {
    List(showArt) { artwork in
      NavigationLink(
      destination: DetailView(artwork: artwork)) {
        Text("\(artwork.reaction)  \(artwork.title)")
          .onAppear() { artwork.load() }
          .contextMenu {
            Button("Love it: ??") {
              self.setReaction("??", for: artwork)
            }
            Button("Thoughtful: ??") {
              self.setReaction("??", for: artwork)
            }
            Button("Wow!: ??") {
              self.setReaction("??", for: artwork)
            }
        }
      }
    }
    .navigationBarTitle(tabTitle)
  }
}

4. DetailView.swift

import SwiftUI

struct DetailView: View {
  let artwork: Artwork
  @State private var showMap = false

  var body: some View {
    VStack {
      Image(artwork.imageName)
        .resizable()
        .frame(maxWidth: 300, maxHeight: 600)
        .aspectRatio(contentMode: .fit)
      Text("\(artwork.reaction)  \(artwork.title)")
        .font(.headline)
        .multilineTextAlignment(.center)
        .lineLimit(3)
      HStack {
        Button(action: { self.showMap = true }) {
          Image(systemName: "mappin.and.ellipse")
        }
        .sheet(isPresented: $showMap) {
//          MapView(coordinate: self.artwork.coordinate)
          LocationMap(showModal: self.$showMap, artwork: self.artwork)
        }
        Text(artwork.locationName)
          .font(.subheadline)
      }
      Text("Artist: \(artwork.artist)")
        .font(.subheadline)
      Divider()
      Text(artwork.description)
        .multilineTextAlignment(.leading)
        .lineLimit(20)
    }
    .padding()
    .navigationBarTitle(Text(artwork.title), displayMode: .inline)
  }
}

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

5. LocationMap.swift

import SwiftUI

struct LocationMap: View {
  @Binding var showModal: Bool
  var artwork: Artwork

  var body: some View {
    VStack {
      MapView(coordinate: artwork.coordinate)
      HStack {
        Text(self.artwork.locationName)
        Spacer()
        Button("Done") { self.showModal = false }
      }
      .padding()
    }
  }
}

struct LocationMap_Previews: PreviewProvider {
  static var previews: some View {
    LocationMap(showModal: .constant(true), artwork: artData[0])
  }
}

6. MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
  var coordinate: CLLocationCoordinate2D

  func makeUIView(context: Context) -> MKMapView {
    MKMapView(frame: .zero)
  }

  func updateUIView(_ view: MKMapView, context: Context) {
    let span = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
    let region = MKCoordinateRegion(center: coordinate, span: span)

    // Added annotation for PublicArt project
    let annotation = MKPointAnnotation()
    annotation.coordinate = coordinate
    view.addAnnotation(annotation)

    view.setRegion(region, animated: true)
  }
}

struct MapView_Previews: PreviewProvider {
  static var previews: some View {
    // Using Artwork object instead of Landmark
    MapView(coordinate: artData[5].coordinate)
  }
}

7. Artwork.swift

import MapKit
import SwiftUI

struct Artwork {
  let id = UUID()
  let artist: String
  let description: String
  let locationName: String
  let discipline: String
  let title: String
  let imageName: String
  let coordinate: CLLocationCoordinate2D
  var reaction: String

  func load() {
    print(">>>>> Downloading \(self.imageName) <<<<<")
  }

//  init(artist: String, description: String, locationName: String, discipline: String,
//       title: String, imageName: String, coordinate: CLLocationCoordinate2D, reaction: String) {
//    print(">>>>> Downloading \(imageName) <<<<<")
//    self.artist = artist
//    self.description = description
//    self.locationName = locationName
//    self.discipline = discipline
//    self.title = title
//    self.imageName = imageName
//    self.coordinate = coordinate
//    self.reaction = reaction
//  }
}

extension Artwork: Identifiable { }

// Subset of Honolulu Public Art data set at
// https://data.honolulu.gov/dataset/Public-Art/yef5-h88r
// Note: The current imagefile server is different from what's listed.
// Current URLs are in image-urls.txt in the starter folder.

let artData = [
  Artwork(artist: "Sean Browne", description: "Bronze figure of Prince Jonah Kuhio Kalanianaole", locationName: "Kuhio Beach", discipline: "Sculpture", title: "Prince Jonah Kuhio Kalanianaole", imageName: "002_200105", coordinate: CLLocationCoordinate2D(latitude: 21.273389, longitude: -157.823802), reaction: ""),
  Artwork(artist: "Robert Lee Eskridge", description: "One of a pair of murals at Ala Mona Regional Park. A Works Progress Administration art project, done in the Art Deco style. It depicts various aspects of makahiki (harvest festival), imagined as taking place in the vicinity of what is now known as Ala Moana Park, makahiki pa'ani ho'oikaika (annual sports tournaments) are emphasized. This mural depicts ali'i with their retainers traveling between villages by wa'a kaulua (double hulled canoe), a carving of Lono and kahili (feather standards) accompany them. Puowaina (Punchbowl) is shown in the background. Also depicted is he'e nalu (surfing) on olo (long surfboard) and 'o'o ihe (sport of spear throwing) whereby a group of men, at a given signal, hurl their spears at one man who would either catch the spears, dodge them, or otherwise fend them off.", locationName: "Lester McCoy Pavilion", discipline: "Mural", title: "Makahiki Festival Mauka Mural", imageName: "19300102", coordinate: CLLocationCoordinate2D(latitude: 21.290959, longitude: -157.851265), reaction: ""),
  Artwork(artist: "Kate Kelly", description: "A cast bronze commemorative plaque set into a monolith. The plaque memorializes Amelia Earhart's first flight to Hawaii in 1935.", locationName: "Diamond Head Lookout/Kuilei Beach Cliffs", discipline: "Plaque", title: "Amelia Earhart Memorial Plaque", imageName: "193701", coordinate: CLLocationCoordinate2D(latitude: 21.256139, longitude: -157.804769), reaction: "??"),
  Artwork(artist: "Marguerite Louis Blasingame", description: "The stone bas relief entry way to the 1939 Board of Water Supply building. The bas relief is executed on a series of green steatite stone blocks which depict mythical and human Hawaiian figures, flora, and animals in the upper portions flanking either side of a central doorway as well as stylized letter forming a narrative text beneath the figurative panels. The two panels, one on the Diamond Head side of the entry way and the other on the other side of the entry door both depict stories involving the god Kane and Kaneloa in a mythical story about the discovery and use of water.", locationName: "Board of Water Supply Engineering Building Entrance", discipline: "Mural", title: "Ka Wai Ake Akua", imageName: "193901-5", coordinate: CLLocationCoordinate2D(latitude: 21.306108, longitude: -157.852555), reaction: ""),
  Artwork(artist: "Juliette May Fraser", description: "A mural depicting various agricultural activities occurring in Hawaii over several time periods, from pre-contact to the 20th century.", locationName: "Board of Water Supply Building Lobby", discipline: "Mural", title: "Pure Water: Man's Greatest Need", imageName: "195801", coordinate: CLLocationCoordinate2D(latitude: 21.306008, longitude: -157.853896), reaction: ""),
  Artwork(artist: "Charles Watson", description: "A stylized sculpture of a giraffe with the body made of welded rebar rings. The body is articulated by using weld material to give the spotty look of the animal. The head is approximately 12\" long and it peers down, its mouth open, and with long eyelashes. There are ears and horns on its head and there are iron rods of about 4-6\" in length that are used to articulate the hairs on the back of the giraffe's neck.", locationName: "Honolulu Zoo Elephant Exhibit", discipline: "Sculpture", title: "Giraffe", imageName: "198912", coordinate: CLLocationCoordinate2D(latitude: 21.270449, longitude: -157.819816), reaction: ""),
  Artwork(artist: "Yoshinari Kochi", description: "A roughly carved \"C\" form which represents \"century,\" supported by a pillar with four Chinese characters on the sides which signify that \"blessings from heaven are invoked by peace and harmony.\" The sculpture commemorates the 75th anniversary of the first Japanese immigrants to arrive in Hawaii.", locationName: "Foster Botanical Garden", discipline: "Sculpture", title: "Hiroshima Monument", imageName: "196001", coordinate: CLLocationCoordinate2D(latitude: 21.316633, longitude: -157.858247), reaction: "??"),
  Artwork(artist: "Unknown", description: "Bronze plaque mounted on a stone with an inscription marking the site of an artesian well.", locationName: "1922 Wilder Avenue", discipline: "Plaque", title: "Pioneer Artesian Well Site", imageName: "193301-2", coordinate: CLLocationCoordinate2D(latitude: 21.30006, longitude: -157.827969), reaction: ""),
  Artwork(artist: "Unknown", description: "Bronze \"Roll of Honor\" plaque listing 101 Hawaii citizens killed in World War I.", locationName: "Queen's Beach", discipline: "Plaque", title: "Roll of Honor", imageName: "193101", coordinate: CLLocationCoordinate2D(latitude: 21.26466, longitude: -157.821463), reaction: ""),
  Artwork(artist: "Unknown", description: "Bronze plaque honoring Don Francisco de Paula Marin.", locationName: "Marin Tower Courtyard", discipline: "Plaque", title: "Francisco De Paula Marin Residence", imageName: "199909", coordinate: CLLocationCoordinate2D(latitude: 21.311242, longitude: -157.864106), reaction: ""),
  Artwork(artist: "Sean Browne", description: "Larger than life-size bronze figure of King David Kalakaua mounted on a granite pedestal.", locationName: "Waikiki Gateway Park", discipline: "Sculpture", title: "King David Kalakaua", imageName: "199103-3", coordinate: CLLocationCoordinate2D(latitude: 21.283921, longitude: -157.831661), reaction: "??"),
  Artwork(artist: "I-Fan Chen", description: "Standing bronze figure of Dr. Sun Yat Sen installed on a pedestal.", locationName: "Sun Yat-Sen Mall", discipline: "Sculpture", title: "Sun Yat Sen", imageName: "197613-5", coordinate: CLLocationCoordinate2D(latitude: 21.314309, longitude: -157.861825), reaction: "??"),
  Artwork(artist: "Emiko Mizutani", description: "Mural of white glazed and semi-glazed ceramic tiles mounted on wood panels.", locationName: "Pali Golf Course Clubhouse Ballroom Entry", discipline: "Mural", title: "Trees", imageName: "199802", coordinate: CLLocationCoordinate2D(latitude: 21.37307, longitude: -157.785564), reaction: "??"),
  Artwork(artist: "Don Dugal", description: "A painted wall relief consisting of over 200 small painted panels affixed to a wall depicting a view of the ocean and horizon beyond tree trunks and branches done in subtle gray and blue tones.", locationName: "Medical Examiner Facility Entry", discipline: "Mural", title: "November Light", imageName: "198803", coordinate: CLLocationCoordinate2D(latitude: 21.315893, longitude: -157.867302), reaction: "??"),
  Artwork(artist: "Elizabeth Mapelli", description: "A mosaic depicting tropical foliage against a starry sky.", locationName: "Alapai Police Station 1st Floor Entrance", discipline: "Mural", title: "Aloha Grotto", imageName: "199303-2", coordinate: CLLocationCoordinate2D(latitude: 21.304271, longitude: -157.851326), reaction: ""),
  Artwork(artist: "Marguerite Louis Blasingame", description: "One of a pair of low-relief marble tablets of a Hawaiian couple set into a wall.", locationName: "Lester McCoy Pavilion Banyan Court Garden", discipline: "Mural", title: "Hawaiian Couple", imageName: "19350202a", coordinate: CLLocationCoordinate2D(latitude: 21.291074, longitude: -157.851148), reaction: ""),
  Artwork(artist: "Paul Saviskas", description: "A stainless steel sculpture of three kihi kihi (Moorish idol fish) swimming around coral mounted on a concrete base.", locationName: "Hanauma Bay Visitor Center", discipline: "Sculpture", title: "Kihi Kihi", imageName: "200304", coordinate: CLLocationCoordinate2D(latitude: 21.273274, longitude: -157.694828), reaction: "??")
]

后記

本篇主要講述了基于SwiftUI的導航的實現，感興趣的給個贊或者關注~~~