我想在我的应用程序设置中创建一个选择器,允许用户选择他们的通知音。具体来说,我希望用户能够在选择此音调之前预览它。
我目前的实现实际上实现了这一点。我的选择器具有 navigationLink 样式,并包含多个 HStack,每个 HStack 由文本和按钮组成。
struct SettingsView: View {
...
var body: some View {
NavigationStack {
Form {
Toggle("Push Notifications", isOn: binding)
Picker("Tone", selection: $toneSelection) {
HStack {
Text("Simple")
Button(action: {playPreview(previewSound: "Sound1")}) {
Image(systemName: "speaker.wave.3.fill")
}
}.tag(NotificationType.simple)
HStack {
Text("Reverb")
Button(action: {playPreview(previewSound: "Sound2")}) {
Image(systemName: "speaker.wave.3.fill")
}
}.tag(NotificationType.reverb)
}
.pickerStyle(.navigationLink)
}
}
}
}
但我希望按钮/图标在做出选择后消失。
您可以在表单中放置实际的
.navigationLink
,而不是使用 NavigationLink
选择器样式。它的目的地将是 .inline
中的 List
样式选择器。
这样,您就可以自定义
NavigationLink
的标签,它允许您仅放置音调的名称。
这是一个例子:
// suppose NotificationType is an enum like this
enum NotificationType {
case simple, reverb
var description: LocalizedStringKey {
switch self {
case .simple:
"Simple"
case .reverb:
"Reverb"
}
}
}
struct ContentView: View {
@State var toneSelection = NotificationType.simple
var body: some View {
NavigationStack {
Form {
LabeledContent("Tone") {
NavigationLink {
TonePicker(toneSelection: $toneSelection)
} label: {
HStack {
Spacer() // this spacer pushes the tone's name to the right of the list row
Text(toneSelection.description)
}
}
}
}
}
}
}
struct TonePicker: View {
@Binding var toneSelection: NotificationType
@Environment(\.dismiss) var dismiss
var body: some View {
List {
Picker("Tone", selection: $toneSelection) {
HStack {
Text("Simple")
Button(action: { playSound("Sound1") }) {
Image(systemName: "speaker.wave.3.fill")
}
}.tag(NotificationType.simple)
HStack {
Text("Reverb")
Button(action: { playSound("Sound2") }) {
Image(systemName: "speaker.wave.3.fill")
}
}.tag(NotificationType.reverb)
}
.pickerStyle(.inline)
}
.navigationTitle("Tone")
// once the user selected something, navigate back
.onChange(of: toneSelection) {
dismiss()
}
}
}