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")
}
}
}