[SwiftUI] Custom Alert

SwiftUI에서 custom alert을 사용해보자

Custom Alert

구글링을 해봐도 내가 원하는 방식의 Custom alert에 대한 것은 찾아볼 수 없었다..

그래서 이렇게 하는게 맞는건가 싶지만 나만의 방식으로 구현해봤다.

// View

// ...

// State 변수로 초기값 false
@State var isShowAlertView = false

// ... 

// 버튼에 Long press 이벤트가 들어오면 값 변경
Button(action: {}) {
    Circle()
        .frame(width: 71, height: 71)
        .foregroundColor(isPress ? Color(red: 209/255, green: 131/255, blue: 183/255) : Color(red: 114/255, green: 114/255, blue: 114/255))
        .overlay(
            Circle()
                .stroke(lineWidth: 10)
                .foregroundColor(isPress ? Color(red: 243/255, green: 165/255, blue: 217/255) : Color(red: 148/255, green: 148/255, blue: 148/255))
        )
        .onLongPressGesture(minimumDuration: .infinity) {
            
        } onPressingChanged: { isPress in
            self.isShowAlertView = true
        }

// ...

// State 변수이기 때문에 isShowAlertView 변수가 변할 때마다 값 체크 후 true면 AlertView 생성
if isShowAlertView {
    ProductConfirmAlertView(isShowAlert: $isShowAlertView)
}

// ...

// AlertView

struct ProductConfirmAlertView: View {
    
    @Binding var isShowAlert: Bool
    
    init(isShowAlert: Binding<Bool> = .constant(true)) {
        _isShowAlert = isShowAlert
    }
    
    var body: some View {
        VStack {
            VStack {
                Spacer().frame(height: 20)
                
                Text("상품 정보")
                    .fontWeight(.semibold)
                    .font(.system(size: 18))
                
                Spacer().frame(height: 8)
                
                Text("불")
                    .fontWeight(.medium)
                    .font(.system(size: 13))
                
                Spacer().frame(height: 30)
                
                Image(systemName: "flame.fill")
                    .font(.system(size: 30))
                
                Spacer()
                
                HStack(spacing: 0) {
                    Spacer().frame(width: 12)
                    
										// 취소버튼 누르면 isShowAlert을 false로 만들면서 AlertView 표시안함
                    Text("취소")
                        .foregroundColor(.white)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 50)
                        .background(Color.gray)
                        .cornerRadius(10)
                        .onTapGesture {
                            isShowAlert = false
                        }
                    
                    Spacer().frame(width: 12)

										// 확인버튼 누르면 다음 화면
                    NavigationLink {
                        SettingView()
                    } label: {
                        Text("확인")
                            .foregroundColor(.white)
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 50)
                            .background(Color.blue)
                            .cornerRadius(10)
                    }
                    
                    Spacer().frame(width: 12)
                }
                .frame(minWidth: 0, maxWidth: .infinity)
                Spacer().frame(height: 15)
            }
            .frame(width: 290, height: 225)
            .background(Color.white)
            .cornerRadius(10)
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
        .background(Color.black.opacity(0.5))
        .edgesIgnoringSafeArea(.all)
    }
}

🤔

View안에 조건에 State와 Binding을 사용하여 조건에 맞춰서 Alert을 보여주고 안보여주고 하는 방법으로 구현했다.

이렇게 하는게 맞는건가 라는 생각은 만드는 내내 들었고 지금도 든다.

하지만 안좋은 방법일지라도 틀린 방법이 어디있을까..

더 좋은 방법을 찾아봐야겠다.

 

 

제가 틀렸거나 다른 의견이 있으시다면 댓글로 남겨주시면 감사하겠습니다 :)