System: Mac OS 10.15.1, XCode 11.2.1, swift 5.0
Writing Time: 2019-11-26

Explanation

This article code implementation WWDC2019 video Introducing SwiftUI: Building Your First App , improvement is achieved with XCode 11.2.1, the contents of the video is to be implemented on XCode 11 beta, has been abandoned some api.

running result:
Here Insert Picture Description

Creating SwiftUI engineering, as well as a new class SwiftUI

New Project, named RoomWWDC204.
For details, see SwiftUI combat: monopolized the new framework

Creating Model

The data SwiftUI in the first class citizens here to create a data type Room

import SwiftUI

struct Room: Identifiable {
    var id = UUID()
    var name: String
    var capacity: Int
    var hasVideo: Bool = false
    
    var imageName: String {
        return name
    }
    var thumbnailName: String {
        return name  + "Thumb"
    }
    
}

#if DEBUG
let testData = [
    Room(name: "room-1", capacity: 6, hasVideo: true),
    Room(name: "room-2", capacity: 8, hasVideo: false),
    Room(name: "room-3", capacity: 16, hasVideo: true),
    Room(name: "room-4", capacity: 10, hasVideo: true),
    Room(name: "room-5", capacity: 12, hasVideo: false),
    Room(name: "room-6", capacity: 8, hasVideo: false),
    Room(name: "room-7", capacity: 10, hasVideo: true),
    Room(name: "room-8", capacity: 7, hasVideo: false),
    Room(name: "room-9", capacity: 1, hasVideo: false),
]

#endif

Resolution:

id: Object that uniquely identifies
name: the name of the picture
capacity: Room capacity
hasVideo: whether it is video conferencing
imageName: picture name
thumbnailName: Thumbnails name

Observer data

In order to implement CRUD data, data can be passed down layer by layer.
Create a class RoomStore

import SwiftUI
import Combine
import Foundation

class RoomStore: ObservableObject {
    
    @Published var rooms: [Room]
    
    init(rooms: [Room]) {
        self.rooms = rooms
    }
    
}

Details page

New Cell page RoomDetail,

import SwiftUI

struct RoomDetail: View {
    let room: Room
    @State private var zoomed = false
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            Image(room.imageName)
                .resizable()
                .aspectRatio(contentMode: zoomed ? .fill : .fit)
                .navigationBarTitle(Text(room.name), displayMode: .inline)
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 2)) {
                        self.zoomed.toggle()
                    }
                }
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
            
            if room.hasVideo && !zoomed {
                Image(systemName: "video.fill")
                    .font(.title)
                    .padding(.all)
                    .transition(.move(edge: .leading))
            }
        }
    }
}

#if DEBUG
struct RoomDetail_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            NavigationView {
               RoomDetail(room: testData[0])
            }
            NavigationView {
               RoomDetail(room: testData[1])
            }
        }
    }
}
#endif

Resolution:

ZStack: Z-axis perpendicular to the direction of the container, put a layer below the large image, the upper left corner of the top layer to put the camera.
resizable: Picture Scalable
aspectRatio: scaling (fill stretching picture screen, fit or scaled down to show all)
navigationBarTitle: navigation bar text
onTapGesture: Click Event
withAnimation: Animation
transition: transition animation

这个页面可以单独预览(快捷键： Command + Option + p), 这里用Group可以同时预览两个页面。
第一个hasVideo = true，左上角有摄像头。 Here Insert Picture Description
第二个hasVideo = false. 左上角有没有摄像头。

@State根据属性去控制界面self.zoomed.toggle()

数据流

数据权限	Source of Truth	Derived Value
只读	Constant	Property
读写	@State ObservableObject	@ObservedObject

主界面List视图

tableview在这里就是List

//
//  ContentView.swift
//  RoomWWDC204
//
//  Created by zgpeace on 2019/11/24.
//  Copyright © 2019 zgpeace. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    @ObservedObject var store = RoomStore(rooms: [])
    
    var body: some View {
        NavigationView {
//            List(store.rooms) { room in
            List {
                Section {
                    Button(action: addRoom) {
                        Text("Add Room")
                    }
                }
                
                Section {
                    ForEach(store.rooms) { room in
                        RoomCell(room: room)
                    }
                    .onDelete(perform: delete)
                    .onMove(perform: move)
                }
            }
            .navigationBarTitle(Text("Rooms"))
        .navigationBarItems(trailing: EditButton())
            .listStyle(GroupedListStyle())
        }
    
    }
    
    func addRoom() {
        store.rooms.append(Room(name: "Hall 2", capacity: 2000))
    }
    
    func delete(at offsets: IndexSet) {
        store.rooms.remove(atOffsets: offsets)
    }
    
    func move(from source: IndexSet, to destination: Int) {
        store.rooms.move(fromOffsets: source, toOffset: destination)
    }
}

struct RoomCell: View {
    let room: Room
    
    var body: some View {
        NavigationLink(destination: RoomDetail(room: room)) {
            Image(room.thumbnailName)
                .cornerRadius(8)
            VStack(alignment: .leading) {
                Text(room.name)
                Text("\(room.capacity) people")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
            }
        }
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView(store: RoomStore(rooms: testData))
            
            ContentView(store: RoomStore(rooms: testData))
                .environment(\.sizeCategory, .extraExtraExtraLarge)
            
            ContentView(store: RoomStore(rooms: testData))
                .environment(\.colorScheme, .dark)
            
            ContentView(store: RoomStore(rooms: testData))
            .environment(\.layoutDirection, .rightToLeft)
        }
    }
}
#endif