SwiftUI 2.0 中的菜单组件 —— Menu

• 普通菜单
  
  

struct ContentView: View {
    @State private var bgColor = Color.white
    var body: some View {
        HStack(alignment: .top){
        
            bgColor
            Menu("菜单"){
                Section{
                    Button(action: {
                        bgColor = Color.red
                    }, label: {
                        Text("栏目一")
                    })
                }
                Section{
                    Button(action: {
                        bgColor = Color.yellow
                    }, label: {
                        Text("栏目二")
                    })
                    Button(action: {
                        bgColor = Color.green
                    }, label: {
                        Text("栏目三")
                    })
                }
            }
        }
    }
}

• 分栏菜单
  
  

struct ContentView: View {
    @State private var bgColor = Color.white
    var body: some View {
        HStack(alignment: .top){
            bgColor
            Menu {
                Button(action: {
                    bgColor = Color.red
                }, label: {
                    Text("栏目一")
                })
                Button(action: {
                    bgColor = Color.yellow
                }, label: {
                    Text("栏目二")
                })
                Button(action: {
                    bgColor = Color.green
                }, label: {
                    Text("栏目三")
                })
            } label: {
                Label("菜单",systemImage:"heart").foregroundColor(.gray)
            }
        }
    }
}

• 多级嵌套菜单
  
  

struct ContentView: View {
    @State private var bgColor = Color.white
    var body: some View {
        HStack(alignment: .top){
            bgColor
            Menu {
                Button(action: {
                    bgColor = Color.red
                }, label: {
                    Text("栏目一")
                })
                Button(action: {
                    bgColor = Color.yellow
                }, label: {
                    Text("栏目二")
                })
                Button(action: {
                    bgColor = Color.green
                }, label: {
                    Text("栏目三")
                })
                
                Menu("二级菜单"){
                    Section{
                        Button(action: {
                            bgColor = Color.red
                        }, label: {
                            Text("栏目一")
                        })
                    }
                    Section{
                        Button(action: {
                            bgColor = Color.green
                        }, label: {
                            Text("栏目三")
                        })
                    }
                }
            } label: {
                Label("菜单",systemImage:"heart").foregroundColor(.gray)
            }
        }
    }
}

• Menu + Picker
  
  

struct ContentView: View {
    @State private var bgColor = Color.white
    @State private var selectedIndex = 0
    var colors:[Color] = [.red,.yellow,.green]
    var colorText:[String] = ["红","黄","绿"]
    var body: some View {
        HStack(alignment: .top){
            colors[selectedIndex]
            Menu("菜单"){
                Picker("选择颜色", selection: $selectedIndex) {
                    ForEach(0..<self.colorText.count){
                        index in
                        Text(colorText[index])
                    }
                }
            }
        }
    }
}