
1. Alert창 표시 유무를 관리하는 bool 타입 @State 변수 추가
struct DetailView: View {
...
@State private var showDeleteAlert = false
...
2. 누르면 Alert창을 표시할 뷰에서 해당 @State 변수 값 변경
...
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button {
showDeleteAlert = true
} label: {
Image(systemName: "trash")
}
...
3. 해당 뷰에 .alert 모디파이어 추가
4. .alert 모디파이어 내부에 버튼 추가
- 참고로 취소 버튼은 자동으로 추가되므로 별도로 추가하지 않아도 된다.
- role을
destructive
로 하면 알아서 버튼 위치도 조정해주고 빨간 글씨로 띄워준다.
Button {
showDeleteAlert = true
} label: {
Image(systemName: "trash")
}
.alert("삭제 확인", isPresented: $showDeleteAlert) {
Button(role: .destructive) {
memoStore.delete(memo: memo)
} label: {
Text("삭제")
}
} message: {
}
...
5. alert 모디파이어에 띄울 message 작성하기
.alert("삭제 확인", isPresented: $showDeleteAlert) {
Button(role: .destructive) {
memoStore.delete(memo: memo)
} label: {
Text("삭제")
}
} message: {
Text("메모를 삭제할까요?")
}
6. 전체 코드
...
@State private var showDeleteAlert = false
...
ToolbarItemGroup(placement: .bottomBar) {
Button {
showDeleteAlert = true
} label: {
Image(systemName: "trash")
}
.foregroundColor(.red)
.alert("삭제 확인", isPresented: $showDeleteAlert) {
Button(role: .destructive) {
memoStore.delete(memo: memo)
} label: {
Text("삭제")
}
} message: {
Text("메모를 삭제할까요?")
}
...