[SwiftUI] alert창 띄우기

RudinP·어제
0

Study

목록 보기
290/292

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("메모를 삭제할까요?")
                }
...
profile
iOS 개발자가 되기 위한 스터디룸...

0개의 댓글