31. [SwiftUI] .actionSheet() 액션시트

알럿에 이어 액션시트를 공부해 보자.

화면 하단에서 위로 올라오며 다양한 버튼이 있는 화면을 한번쯤은 봤을 것이다.

요런거

//  Created by Toughie on 2023/04/29.
//

import SwiftUI

struct ActionSheetPrac: View {
    
    @State var showActionSheet: Bool = false
    
    var body: some View {
        Button("Tap") {
            showActionSheet.toggle()
        }
        .actionSheet(isPresented: $showActionSheet) {
            getActionSheet()
        }
    }
    
    private func getActionSheet() -> ActionSheet {
        
        let button1: ActionSheet.Button = .default(Text("DEFAULT"))
        let button2: ActionSheet.Button = .destructive(Text("DESTRUCTIVE"))
        let button3: ActionSheet.Button = .cancel()
        let buttons: [ActionSheet.Button] = [button1, button1, button1, button2, button3]
        
        return ActionSheet(
            title: Text("TITLE"),
            message: Text("MESSAGE"),
            buttons: buttons)
    }
}

적용 방법은 알럿과 거의 동일하다.

 

인스타그램과 비슷한 뷰를 만들어 보며 좀 더 알아보자.

내 포스팅의 액션시트와, 춘식이의 액션시트가 다른 것을 알 수 있다.

원래는 포스팅 뷰도 따로 빼고, 재사용성을 위해 생성자도 활용하려 했는데.. 하다가 이상하게 꼬여서 그냥 간단하게 구현했다 ㅜㅜ

//  Created by Toughie on 2023/04/29.
//

import SwiftUI

struct ActionSheetPrac: View {
    
    @State var showActionSheet: Bool = false
    //실제 앱이라면 포스팅 시점에 정해지겠지만, 여기서는 버튼을 누를 때 할당 됨
    @State var actionSheetOption: ActionSheetOptions?
    
    //알럿 예시와 비슷하게 열거형 활용
    enum ActionSheetOptions {
        case isMyPost
        case isOtherPost
    }
    
    var otherView: some View {
        VStack {
            HStack {
                Text("🐱")
                    .frame(width: 20, height: 20)
                Text("sik")
                Spacer()
                Button {
                //뷰마다 다른 액션시트를 띄우기 위함
                    actionSheetOption = .isOtherPost
                    self.showActionSheet.toggle()
                    
                } label: {
                    Image(systemName: "ellipsis")
                }
                .accentColor(.primary)
            }
            .padding(.horizontal)
            
            Image("danceChoon")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
            
            Text("Let's Dance !")
        }
        .actionSheet(isPresented: $showActionSheet) {
            getActionSheet()
        }
    }
    var myView: some View {
        VStack {
            HStack {
                Text("🦁")
                    .frame(width: 20, height: 20)
                Text("Toughie")
                Spacer()
                Button {
                    actionSheetOption = .isMyPost
                    self.showActionSheet.toggle()
                } label: {
                    Image(systemName: "ellipsis")
                }
                .accentColor(.primary)
            }
            .padding(.horizontal)
            
            Image("me")
                .resizable()
                .aspectRatio(1, contentMode: .fit)
            
            Text("Let's study SwiftUI !")
        }
        .actionSheet(isPresented: $showActionSheet) {
            getActionSheet()
        }
    }
    
    var body: some View {
        ScrollView {
            myView
            otherView
        }
    }
    private func getActionSheet() -> ActionSheet {
        let shareButton: ActionSheet.Button = .default(Text("SHARE")) {
            //code to share
        }
        let reportButton: ActionSheet.Button = .destructive(Text("REPORT")) {
            //code to report
        }
        let deleteButton: ActionSheet.Button = .destructive(Text("DELETE")) {
            //code to delete
        }
        let cancelButton: ActionSheet.Button = .cancel()
        
        switch actionSheetOption {
        case .isMyPost:
            return ActionSheet(title: Text("Toughie's Post"), message: nil, buttons: [shareButton,deleteButton,cancelButton])
            
        case .isOtherPost:
            return ActionSheet(title: Text("Other's Post"), message: nil, buttons: [reportButton, cancelButton])
        default:
            return ActionSheet(title: Text("HI"))
        }
    }
}

액션시트는 상황에 맞게, 유저에게 다양한 옵션을 제공할 수 있는 강력한 기능이라고 생각한다.