WWDC 2019 SwiftUI Essentials

Vertical Stack

VStack {
   Text("Avocado Toast").font(.title)
   
   Toggle(isOn: $order.includeSalt) {
      Text("Include Salt")
   }
   Toggle(isOn: $order.quantity, in: 1...10) {
      Text("Include Red Pepper Flakes")
    }

    Stepper(value: $order.quantity, in: 1...10) {
      Text("Quantity: \(order.quantity)"
    }

    Button(action: submitOrder) {
      Text("Order")
    }
}

View Container Syntax

container {
    content
    content
    ……
}

VStack(alignment: .leading) {
    Image(...)
    Text(...)
    Text(...)
}

Binding Syntax

//绑定变量
struct OrderFrom : View {
    @State private var order: Order
    
    var body: some View {
        Stepper(value: $order.quantity, in: 1...10) {
            Text("Quantity: \(order.quantity)")
         }
    }
}

struct Order {
    var includeSalt: Bool
    var includeRedPepperFlakes: Bool
    var quantity: Int
}

Data Flow Through SwiftUI
//More information In WWDC

//添加透明度
Toggle(isOn: $order.includeSalt) { ... }
.opacity(0.5)
//或者
VStack() {
    ...
}
.opacity(0.5)

根据数据绘制列表

struct OrderHistory : View {
   let previousOrders: [CompletedOrder]

   var body: some View {
     List(previousOrders) { order in
       VStack(alignment: .leading) { 
          Text(order.summary)
          Text(order.purchaseDate)
             .font(.subheadline)
             .foregroundColor(.secondary)
      }
    }    
   }
}

//related video In WWDC
Building Custom Views in SwiftUI

//编写Button
Button(action: action) {
  ...
}

//通过多个section进行分隔
Form {
  Section{
    ...
  }
  Section{
    ...
  }
  Section{
    ...
  }
}

//Navigation View
//新的导航View
var body: some View {
  Form {
    ...
  }.navigationBarTitle(Text("Avocado Toast"))
}

//新的TabbedView
//底部栏View

//related In WWDC
SwiftUI on watchOS
Modern Swift API Design
What’s New in Swift