Swift UI Sheet使用

最近为了满足我司整理发票和发工资的问题，由于我司这些事都是我来弄的，所以干脆写个mac的App来完成这些重复劳动。顺便把一些开发过程分享出来。

今天先分享一个，通过使用sheet来完成弹窗相关操作的流程：

第一种方法，通过传参形式

将sheet绑定到 Button上，通过参数，将控制sheet显示的bool值传入 sheet对应的view。

Button(action: {
    showingSheet.toggle()
}) {
    Text("添加员工")
}.sheet(isPresented: $showingSheet, onDismiss: {
    print("dismissed")
}, content: {
    StaffSalaryEditView(showingSheet: $showingSheet)
})

StaffSalaryEditView

  struct StaffSalaryEditView: View {
    @Binding var showingSheet: Bool

    @State var socialInsuranceSalary = "8"
    var body: some View {
        VStack {
            Group {
                TextField("社保工资", text: $socialInsuranceSalary, prompt: Text("8")).frame(width: 30, height: 20, alignment: .center)
            }
            HStack {
                Button(action: {
                    showingSheet = false
                }) {
                    Text("关闭")
                }
                Button(action: {
                }) {
                    Text("提交")
                }
            }

        }.frame(width: 1350, height: 1350, alignment: .topLeading)
    }
}

第二种方法，使用dismiss()方法

Button(action: {
    showingSheet.toggle()
}) {
    Text("添加员工")
}.sheet(isPresented: $showingSheet, onDismiss: {
    print("dismissed")
}, content: {
    StaffSalaryEditView()
})

struct StaffSalaryEditView: View {
    @Environment(\.dismiss) var dismiss

    @State var socialInsuranceSalary = "8"
    var body: some View {
        VStack {
            Group {
                TextField("社保工资", text: $socialInsuranceSalary, prompt: Text("8")).frame(width: 30, height: 20, alignment: .center)
            }
            HStack {
                Button(action: {
                    dismiss()
                }) {
                    Text("关闭")
                }
                Button(action: {
                    // dismiss()
                }) {
                    Text("提交")
                }
            }

        }.frame(width: 1350, height: 1350, alignment: .topLeading)
    }
}

这种方法是iOS15之后才有的，之前的方法是

@Environment(\.presentationMode) var presentationMode

presentationMode.wrappedValue.dismiss()

最后效果看一下吧：

image.png
image.png
image.png

当然，该功能中，还涉及到了CoreData数据库的相关功能。会在后续文章中介绍。

参考：

https://www.hackingwithswift.com/quick-start/swiftui/how-to-present-a-new-view-using-sheets

https://useyourloaf.com/blog/dismissing-swiftui-views/