在 SwiftUI Picker 中实现预览按钮

Question

我想在我的应用程序设置中创建一个选择器，允许用户选择他们的通知音。具体来说，我希望用户能够在选择此音调之前预览它。

我目前的实现实际上实现了这一点。我的选择器具有 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)
            }
        }
    }
}

但我希望按钮/图标在做出选择后消失。

Answer 1

您可以在表单中放置实际的

.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()
        }
    }
}