[SwiftUI] menu (feat. Picker)

 menu (feat. Picker)

 

✅ 메뉴에 대해서 알아보자.

코드 베이스로 코드 작성하고 부터는 스토리보드를 잘 사용안하는데, 어느날 보니까 menu를 사용할 수 있는 버튼이 들어왔다.

 

 

✅ 코드

import SwiftUI


let myPets =  ["멍멍이 🐶", "야옹이 🐯", "찍찍이 🐹"]

struct ContentView: View {
    
    @State private var shouldShowAlert : Bool = false // alert를 띄우기 위함.
    @State private var myText : String = "" // 텍스트
    @State private var selected : Int = 0 // 선택한 인덱스
    
    var body: some View {
        NavigationView {
        	// Spacer()는 상단 1 하단 2의 비율로
            VStack(spacing: 20) {
                    Spacer()
                    Text("\(myPets[selected])") // 뷰에서 나타나는 글자
                        .font(.system(size: 60))
                        .bold()
                    Text("우측 상단에 땡땡땡을 눌러주세요!")
                        .font(.title2)
                        .fontWeight(.black)
                    Spacer()
                    Spacer()
                }
                .padding()
                // 네비게이션 타이틀 -> swiftUI 3.0에서는ㅁ toolbar에서 placment: .principal로 사용
                .navigationTitle("하이요") 
                .toolbar(content: {
                    ToolbarItem(placement: .navigationBarTrailing, content: {
                        Menu { // 메뉴로 묶기 위해서!
                            Button(action: {
                                // 액션
                                print("오늘도 빡코딩 버튼클릭!")
                                shouldShowAlert = true
                                myText = "오늘도 빡코딩!"
                            }, label: {
                                // 라벨
                                Label("오늘도 빡코딩!" , systemImage: "flame.fill")
                            })
                            
                            // 멀티 트레일링 클로저
                            Button {
                                print("집에서 쉬는 날 버튼클릭!")
                                shouldShowAlert = true
                                myText = "집에서 쉬는 날!"
                            } label : {
                                Label("집에서 쉬는 날!" , systemImage: "house.fill")
                            }
                            
                            Section { // 섹션으로 묶어서 처리하기 위해서
                                // 멀티 트레일링 클로저
                                Button {
                                } label : {
                                    Label("새 파일 만들기" , systemImage: "doc")
                                }
                                Button {
                                } label : {
                                    Label("새 폴더 만들기" , systemImage: "folder")
                                }
                            }
                            Section {
                                // 멀티 트레일링 클로저
                                Button {
                                	// action
                                } label : {
                                    Label("파일 모두 삭제" , systemImage: "trash")
                                }
                            }
                            
                            // Picker에는 Binding해야 한다.
                            Picker(selection: $selected, label: Text("애완동물 선택")) {
                            	// indices는 인덱스를 사용하기 위해서
                                ForEach(myPets.indices, id: \.self, content: { index in
                                    Text("\(myPets[index])").tag(index)
                                })
                            }
                            
                        } label: {
                        	// 이 부분에서 label로 버튼 만든다!
                            Circle().foregroundColor(Color.init(#colorLiteral(red: 0.8349713402, green: 0.1496438846, blue: 0.7993865004, alpha: 1)))
                                .frame(width: 50, height: 50)
                                .overlay(
                                    Label("더보기", systemImage: "ellipsis")
                                        .font(.system(size: 30))
                                        .foregroundColor(.white)
                                )
                            
                        } // 메뉴
                    })
                }) // toolbar
                .alert(isPresented: $shouldShowAlert, content: { // alert 통해서 알림 보여줌
                    Alert(
                    	title: Text("알림"),
                        message: Text("\(myText)"),
                        dismissButton: .default(Text("확인"))
                    )
                })
        }
        
    }
}

메뉴 사용 결과 아래는 피커