WWDC 2019 Introducing SwiftUI Bu

The Way Views Work

A View Defines a Piece of UI

//绘制一张带图片的View
struct RoomDetail : View {
    let room: Room
    var body: some View {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
     }
  }

A View Defines its Dependencies

//利用变量依赖来决定显示的UI

struct RoomDetail : View {
    let room: Room
    @State private var zoomed = false

    var body: some View {
        Image(room.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .tapAction { self.zoomed.toggle() }
     }
  }
struct AspectRatioView : View {
    let contentMode: ContentMode
    var body: some View { ... }
}

Data Flow Primitives

Data Flow Through SwiftUI

ZStack(alignment: .topLeading) {
    Image(room.imageName)
        .resizable()
        .aspectRatio(contentMode: zoomed ? .fill : .fit)
        .tapAction {
            withAnimation { self.zoomed.toggle() }
          }

       if room.hasVideo && !zoomed {
            Image(systemName: "video.fill")
                  .font(.title)
                  .padding()
                  .transition(.move(edge: .leading))
        }

}

// Automatic Behaviors
//导航栏按钮
NavigationButton(destination: RoomDetail(room: room)) {

            Image(room.thumbnailName)
                .cornerRadius(8)

            VStack(alignment: .leading) {
                 Text(room.name)

                 Text("\(room.capacity) people")
                     .font(.footnote)
                     .foregroundColor(.secondary)
             }

}

//加入点击事件动画
.tapAction {
    withAnimation { self.zoomed.toggle() }
}

//Other related sessions in WWDC
SwiftUI Essentials
Data Flow Through SwiftUI
Building Custom Views with SwiftUI