Menu in SwftUI

The image is generated with AI

I believe there’s a component that isn’t utilized often: the Menu, especially on the iPhone. The situation for the iPad, however, is somewhat different. In this post, we’ll take a closer look at this component.

When we select the Menu component from the list of components, the code will look something like this:

Menu("Menu") {
    Text("Menu Item 1")
    Text("Menu Item 2")
    Text("Menu Item 3")
}

It’s a list of elements that aren’t ‘clickable’, but we’re looking for something interactive. In the menu, we can insert any element we desire. In this case, we will add three buttons: the first will allow us to open a Color Picker, while the other two will do nothing.

Menu("Menu") {
      Button(action: {
          presentColorPicker.toggle()
      }) {
         Label(
             title: { Text("Color") },
             icon: { Image(systemName: "eyedropper.full")}
         )
      }
      Button("Option 1") {
                        
      }
      Button("Option 2") {
                        
      }
}

To display:

Now, let’s take a look at the entire code. By selecting a color, the background color of the screen will change.

struct ContentView: View {
    @State var colorSelected = Color.white
    @State var presentColorPicker = false
    var body: some View {…