SwiftUI에서 버튼을 눌렀을 때 메뉴를 표시하는 방법

iOS 14 및 SwiftUI 2부터는 이제 앱의 모든 버튼에 팝업 메뉴를 추가할 수 있습니다. newMenu 키워드를 사용하여 이를 구현할 수 있습니다. 어떤 면에서 메뉴는 iOS 앱에서 사용되는 현재 작업 시트를 대체할 것입니다. 작업 시트의 문제는 화면 하단에만 표시된다는 것입니다. iPad 및 Mac과 같은 더 큰 화면에서는 잘 보이지 않습니다. 메뉴를 사용하면 팝업 메뉴를 화면 하단에만 표시하는 대신 앱에서 표시하려는 위치에 유연성이 있습니다.

애플리케이션에서 이를 구현하는 방법에 대한 아래 예를 살펴보겠습니다.

struct ContentView: View {
    var body: some View {
        
        Menu("Create") {
            Button("Cancel", action: {})
            Button("Search", action: {})
            Button("Add", action: {})
        }
    }
}

위의 예에서 볼 수 있듯이 Menu 키워드를 사용하고 메뉴 이름을 "Create"로 지정합니다. 다음으로 메뉴 중괄호 안에 원하는 만큼 버튼을 추가할 수 있습니다. 메뉴에 버튼을 배치하는 순서는 중요합니다. 우리가 만드는 첫 번째 버튼은 항상 맨 아래에 있고 다음에 만드는 버튼은 이전 버튼 위에 있습니다. 아래 예를 살펴보십시오.





위의 예에서 볼 수 있듯이 만들기 버튼을 탭하면 버튼 메뉴가 코드에 배치한 특정 순서로 나타나는 것을 볼 수 있습니다.

메뉴 안에 메뉴가 있을 수도 있습니다.

struct ContentView: View {
    var body: some View {
        
        Menu("Create") {
            Button("Cancel", action: {})
            Menu("More") {
                    Button("Rename", action: {})
                    Button("Developer Mode", action: {})
                }
            Button("Search", action: {})
            Button("Add", action: {})
        }
    }
}

이제 만들기 버튼을 탭한 다음 더 보기 버튼을 탭하면 주 메뉴 안에 새 메뉴가 표시됩니다.

마지막으로 메뉴에 레이블을 추가하여 메뉴에 텍스트와 아이콘을 사용자 정의할 수 있습니다.

struct ContentView: View {
    var body: some View {
        
        Menu {
            Button("Cancel", action: {})
            Button("Search", action: {})
            Button("Add", action: {})
        } label: {
            Label("Create", systemImage: "plus.circle")
        }
    }
}

위의 예에서 볼 수 있듯이 이제 메뉴 버튼에 사용자 지정 제목과 아이콘을 추가할 수 있습니다.

여전히 혼란스러운 경우 메뉴를 설명하는 데 도움이 되는 훌륭한 WWDC video이 있습니다.

이것이 iOS 14 및 SwiftUI 2에서 메뉴를 사용하는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다.

💻👨🏻‍💻 행복한 코딩하세요! 💻👨🏻‍💻