Ch12. Conditional Views

Displaying a modal sheet

SwiftUI가 @State 프로퍼티를 사용하여 Modal을 띄우는 방식엔 2가지가 있음

• Bool을 사용하여 true일 때 띄우기
• Optional을 사용하여 not nil일 때 띄우기

@State private var isPresented = false

Button(action: {
  self.isPresented.toggle()
}) {
  HStack {
		someViews()
  }
  .sheet(isPresented: $isPresented, onDismiss: {
    print("Modal dismissed. State now: \(self.isPresented)")
  }) {
    viewToPresent()
  }
}

Programmatically dismissing a modal

// In view presented modally
@Binding var showModal: Bool

Button("Done", action: {
    self.showModal = false
})

Creating an alert

@State private var rebookAlert: Bool = false

Button("Rebook Flight", action: {
    self.rebookAlert = true
  })
  .alert(isPresented: $rebookAlert) {
    Alert(title: Text("Contact Your Airline"),
          message: Text("some message"))
  }

Alert에 별도로 버튼을 추가하지 않으면 OK버튼 하나만 추가된다.

UIKit에서 제공하던 addTextField기능은 제공되지 않는다. 그 기능을 사용하려면 modal sheet을 사용해야 할 것

 

Adding an action sheet

Bool 대신 Optional을 사용해보자.

이 때 Optional으로 사용할 타입은 반드시 Identifiable프로토콜을 따라야 한다.

그리고 띄울 Action sheet에서 이 프로퍼티에 접근이 가능하다.

struct CheckInInfo: Identifiable {
  let id = UUID()
  let airline: String
  let flight: String
}

@State private var checkInFlight: CheckInInfo?

if flight.isCheckInAvailable() {
  Button("Check In for Flight", action: {
    self.checkInFlight =
      CheckInInfo(airline: self.flight.airline, flight: self.flight.number)
    }
  )
  .actionSheet(item: $checkInFlight) { flight in
    ActionSheet(
      title: Text("Check In"),
      message: Text("Check in for \(flight.airline)" + 
        "Flight \(flight.flight)"),
      buttons: [
        .cancel(Text("Not Now")),
        .destructive(Text("Reschedule"), action: {
          print("Reschedule flight.")
        }),
        .default(Text("Check In"), action: {
          print("Check-in for \(flight.airline) \(flight.flight).")
        })
      ]
    )
  }
}

.cancel 2개 넣으면 크래쉬남 ㅋㅋ

.actionSheet(item:_)을 사용했다. 여기에 optional로 선언한 프로퍼티의 값이 전달되고 클로져 내부에서 사용가능

Showing a popover

마찬가지로 Bool 또는 Optional으로 사용가능

@State private var showFlightHistory = false

Button("On-Time History") {
  self.showFlightHistory.toggle()
}
.popover(isPresented: $showFlightHistory, arrowEdge: .top) {
  FlightTimeHistory(flight: self.flight)
}