ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Ch12. Conditional Views
    Ray Wenderlich/SwiftUI 2021. 2. 14. 18:15

    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)
    }
    

    'Ray Wenderlich > SwiftUI' 카테고리의 다른 글

    Ch14. Animations  (0) 2021.02.14
    Ch13. Drawing & Custom Graphics  (0) 2021.02.14
    Ch12. Conditional Views  (0) 2021.02.14
    Ch11. Lists & Navigation  (0) 2021.02.07
    Ch9. State & Data Flow  (0) 2021.02.07
    Ch8. Introducint Stacks & Containers  (0) 2021.02.07

    댓글 0

Designed by Tistory.