[SwiftUI] Custom Alert View

 

 

✅ Custom Alert

 

 

 

해커톤을 할 때,

이런 뷰를 구현해야했었다.

 

이것은 기존의 Alert를 Custom하면 나오는것이다.

 

 

import SwiftUI

struct ContentView: View {
    
    @State private var isAlertPresented = false
    
        var body: some View {
            ZStack {
                VStack {
                    Button("Show Custom Alert") {
                        isAlertPresented.toggle()
                    }
                    .padding()
                   
                }
                if isAlertPresented {
                    CustomAlertView(isPresented: $isAlertPresented)
                }
            }
        }
}

struct CustomAlertView: View {
    
    @Binding var isPresented: Bool
    
    var body: some View {
        ZStack {
            Color.black.opacity(0.4) // Alert뜰시 회색 뒷배경
                .edgesIgnoringSafeArea(.all)
            
            VStack{
                VStack {
                    Text("Custom Alert")
                        .font(.title)
                        .foregroundColor(.black)
                        .padding()
                    
                    Spacer()
                    
                    Text("This is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!")
                        .font(.body)
                        .foregroundColor(.black)
                        .padding()
                    
                    Spacer()
                    
                    Button("OK") {
                        isPresented.toggle()
                    }
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.bottom, 20)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.yellow)
                .cornerRadius(20)
                .padding(.horizontal, 50)
                .padding(.vertical, 120)
               
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.red)
        }
    }
}

 

 

알림을 on/off 인지할 수 있는 Bool 변수하나와

ZStack을 잘 이용하면 된다.

 

 

현재 이런 뷰의 프레임을 확인하기위해, 배경색을 적용해서 이런 모습인데,

CustomAlertView안에 있는 VStack의 BackgroundColor를 수정하면 된다.

 

수정한 CustomAlertView의 코드는 다음과 같다.

 

struct CustomAlertView: View {
    
    @Binding var isPresented: Bool
    
    var body: some View {
        ZStack {
            Color.black.opacity(0.4) // Alert뜰시 회색 뒷배경
                .edgesIgnoringSafeArea(.all)
            
            VStack{
                VStack {
                    Text("Custom Alert")
                        .font(.title)
                        .foregroundColor(.black)
                        .padding()
                    
                    Spacer()
                    
                    Text("This is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!\nThis is a custom alert!")
                        .font(.body)
                        .foregroundColor(.black)
                        .padding()
                    
                    Spacer()
                    
                    Button("OK") {
                        isPresented.toggle()
                    }
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
                    .padding(.bottom, 20)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white) // 여기를 white컬러로 !
                .cornerRadius(20)
                .padding(.horizontal, 50)
                .padding(.vertical, 120)
               
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.clear) // 여기는 ZStack의 배경을 보여줄것이기때문에 clear로 !
        }
    }
}

 

 

[ 결과 화면 ]