Alert, 彈出視圖, 展示提示/警告信息

我們可以根據(jù)布爾值顯示Alert。

Button("Alert") {
        self.isError = true
    }.alert(isPresented: $isError, content: {
        Alert(title: Text("Error"), message: Text("Error Reason"), dismissButton: .default(Text("OK")))
    })

截屏2023-06-19 22.50.19.png

截屏2023-06-19 22.50.25.png

它也可以與 識(shí)別項(xiàng)-Identifiable 綁定硼讽。

@State var error: AlertError?

var body: some View {
    Button("Alert Error") {
        self.error = AlertError(reason: "Reason")
    }.alert(item: $error, content: { error in
        alert(reason: error.reason)
    })
}

func alert(reason: String) -> Alert {
    Alert(title: Text("Error"),
            message: Text(reason),
            dismissButton: .default(Text("OK"))
    )
}

struct AlertError: Identifiable {
    var id: String {
        return reason
    }

    let reason: String
}

截屏2023-06-19 23.09.59.png

截屏2023-06-19 23.10.06.png

Modal, 模態(tài)轉(zhuǎn)換/過(guò)渡。我們可以根據(jù)布爾值顯示Modal汰规。

@State var isModal: Bool = false

  var modal: some View {
      Text("Modal2")
  }
  
  var body: some View {
    Button("Modal") {
        self.isModal = true
    }.sheet(isPresented: $isModal, content: {
        self.modal
    })
  }

截屏2023-06-19 23.15.41.png

底部彈出的 sheet視圖 modal2, 可以拖動(dòng)

Simulator Screenshot - iPhone 8 - 2023-06-19 at 23.18.41.png

Alert 也可以與 Identifiable 項(xiàng)綁定根穷。如上圖

@State var detail: ModalDetail?

var body: some View {
    Button("Modal") {
        self.detail = ModalDetail(body: "Detail")
    }.sheet(item: $detail, content: { detail in
        self.modal(detail: detail.body)
    })
}

func modal(detail: String) -> some View {
    Text(detail)
}

struct ModalDetail: Identifiable {
    var id: String {
        return body
    }

    let body: String
}

代碼錯(cuò)誤 ---- 如果您想要完整呈現(xiàn)模態(tài)視圖的舊式模態(tài)呈現(xiàn)屏幕，您可以使用 .fullScreenCover 代替 .sheet宣肚。

由于全屏封面樣式不允許用戶使用手勢(shì)來(lái)關(guān)閉 modal想罕，您必須添加一種手動(dòng)關(guān)閉呈現(xiàn)視圖的方法。 在里面下面的例子霉涨，我們添加一個(gè)按鈕來(lái)通過(guò) set 關(guān)閉呈現(xiàn)的視圖isModal 為假按价。

@State var isModal: Bool = false

var modal: some View {
Text("Modal")
      Button("Dismiss") {
        self.isModal = false
      }
}

Button("Fullscreen") {
    self.isModal = true
}.fullScreenCover(isPresented: $isFullscreen, content: {
      self.modal
    })

如果您使用自定義視圖作為模式，您可以使用presentationMode 環(huán)境鍵笙瑟。

struct Modal: View {
  @Environment(\.presentationMode) var presentationMode

  var body: some View {
    Text("Modal")
    Button("Dismiss Modal") {
      presentationMode.wrappedValue.dismiss()
    }
  }
}

struct ContentView: View {
    @State private var isModal = false

    var body: some View {
        Button("Fullscreen") {
            isModal = true
        }
        .fullScreenCover(isPresented: $isFullscreen, content: {
      Modal()
    })
}

ActionSheet, 操作表演示的存儲(chǔ)類型楼镐。我們可以根據(jù)布爾值顯示ActionSheet。

@State var isSheet: Bool = false

  var actionSheet: ActionSheet {
      ActionSheet(title: Text("Action"),
                  message: Text("Description"),
                  buttons: [
                      .default(Text("OK"), action: {

                      }),
                      .destructive(Text("Delete"), action: {

                      })
                  ]
      )
  }
    
  var body: some View {
    
    Button("Action Sheet") {
      self.isSheet = true
    }.actionSheet(isPresented: $isSheet, content: {
      self.actionSheet
    })

截屏2023-06-19 23.56.49.png

它也可以與 Identifiable 項(xiàng)綁定往枷。

@State var sheetDetail: SheetDetail?

var body: some View {
    Button("Action Sheet") {
        self.sheetDetail = ModSheetDetail(body: "Detail")
    }.actionSheet(item: $sheetDetail, content: { detail in
        self.sheet(detail: detail.body)
    })
}

func sheet(detail: String) -> ActionSheet {
    ActionSheet(title: Text("Action"),
                message: Text(detail),
                buttons: [
                    .default(Text("OK"), action: {

                    }),
                    .destructive(Text("Delete"), action: {

                    })
                ]
    )
}

struct SheetDetail: Identifiable {
    var id: String {
        return body
    }

    let body: String
}

截屏2023-06-19 23.58.39.png