SwiftUI 弹窗, Alert, ActionSheet

Alert, 弹出视图, 展示提示/警告信息

我们可以根据布尔值显示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

它也可以与 识别项-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, 模态转换/过渡。我们可以根据布尔值显示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, 可以拖动

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

Alert 也可以与 Identifiable 项绑定。如上图

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

代码错误 ---- 如果您想要完整呈现模态视图的旧式模态呈现屏幕，您可以使用 .fullScreenCover 代替 .sheet。

由于全屏封面样式不允许用户使用手势来关闭 modal，您必须添加一种手动关闭呈现视图的方法。 在里面下面的例子，我们添加一个按钮来通过 set 关闭呈现的视图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 环境键。

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, 操作表演示的存储类型。我们可以根据布尔值显示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 项绑定。

@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