The Util Designer
SwiftUI 使用Menu基本使用
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-27
SwiftUI提供了很多方便的元件和方法，Menu也是一個很常用的元件。
1. 首先創建一個Menu元件來選擇顏色，並將其設置為背景顏色，Menu的Label是設為顯示的View，另外就是設置選項，以下使用了三個按鈕分別設置三種不同的顏色。
struct MenuExample : View {
    @State var color : Color = .white
    var body: some View {
        ZStack {
            color.opacity(0.5)
            Menu {
                Button {
                    color = .red
                } label: {
                    Text("Red")
                }
                Button {
                    color = .green
                } label: {
                    Text("Green")
                }
                Button {
                    color = .blue
                } label: {
                    Text("Blue")
                }
            } label: {
                Text("Colors")
                    .padding()
                    .background(.gray.opacity(0.2))
            }
        }

    }
}
2. 以下把Menu配合NavigationView一起使用情形，先做一個基本的分佈，右上角會有一個＋號按鈕，我們會進一步擴展其使用Menu來選擇顏色並將其設置為背景色。
import SwiftUI

struct MenuExample : View {
    @State var color : Color = .white
    var body: some View {
        NavigationView {
            ZStack {
                Color.blue.opacity(0.5).ignoresSafeArea()
                VStack {
                    Text("Content")
                        .font(.system(size: 64))
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Text("+")
                }
            }
            .navigationTitle("Colors")
        }


    }
}
3. 然後給Text的＋號用Menu來代替。

import SwiftUI

struct MenuExample : View {
    @State var color : Color = .white
    var body: some View {
        NavigationView {
            ZStack {
                color.opacity(0.3).ignoresSafeArea()
                VStack {
                    Text("Content")
                        .font(.system(size: 64))
                        .foregroundColor(color)
                }
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Menu {
                        Button {
                            color = .red
                        } label: {
                            Text("Red")
                        }
                        Button {
                            color = .green
                        } label: {
                            Text("Green")
                        }
                        Button {
                            color = .blue
                        } label: {
                            Text("Blue")
                        }
                    } label: {
                        Text("＋")
                            .padding()
                            .background(.gray.opacity(0.2))
                    }
                }
            }
            .navigationTitle("Colors")
        }

    }
}