You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI网格图片点击右侧显示及音效播放实现问题(为自闭症儿子开发首应用)

开发自闭症儿童辅助APP的Swift问题

这是我首次尝试用Swift开发应用,目标是给患有自闭症的儿子做一款简单的辅助APP。核心需求:

  • iPad左侧展示喜爱物品的网格列表,点击左侧物品后,对应图片要在右侧区域显示
  • 点击左侧网格里的图片,或者右侧显示的图片,都能播放该物品名称对应的音效

目前已经完成了部分开发,但右侧还是占位图片,现在卡在两个问题上:

  1. 实现左侧网格按钮点击后,对应图片在右侧显示
  2. 确保右侧显示的图片点击时可播放对应音效

附上当前代码:

import SwiftUI
import AVKit

class SoundManager{
    static let instance = SoundManager()
    var player: AVAudioPlayer?
    
    enum SoundOption: String {
        case cheetah
        case dog
        case elephant
        case fox
        case frog
        case goldfish
        case gorilla
        case hippo
        case panda
        case parrot
        case pollarbear
        case tiger
        case wolf
        case zebra
    }
    
    func playsound(sound: SoundOption){
        guard let url = Bundle.main.url(forResource: sound.rawValue, withExtension: ".m4a") else {return}
       
        do {
            player = try AVAudioPlayer(contentsOf: url)
            player?.play()
        } catch let error {
            print("Error playing sound. \(error.localizedDescription)")
        }
    }
}


struct SoundBootcamp: View {
    
    var body: some View {
        VStack{
            Text("First Test Application")
                .lineLimit(1)
                .padding(10)
                .font(.system(size: 500))
                .minimumScaleFactor(0.01)
            HStack{
                ScrollView{
                    VStack{
                        Text("Aircraft")
                            .font(.system(size: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("airliner")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("biplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("cargoplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("gliderplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                
                            }
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("hangglider")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("helicopter")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("hotairballoon")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("rocket")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                
                            }
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("seaplane")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("spaceshuttle")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("zeppelin")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                
                            }
                        }
                        .padding()
                        Text("Example Category")
                            .font(.system(size: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .cheetah)}, label: {
                                    Image("cheetah")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .dog)}, label: {
                                    Image("dog")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .elephant)}, label: {
                                    Image("elephant")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .fox)}, label: {
                                    Image("fox")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                            }
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .frog)}, label: {
                                    Image("frog")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .goldfish)}, label: {
                                    Image("goldfish")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .gorilla)}, label: {
                                    Image("gorilla")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .hippo)}, label: {
                                    Image("hippo")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                            }
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .panda)}, label: {
                                    Image("panda")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .parrot)}, label: {
                                    Image("parrot")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .pollarbear)}, label: {
                                    Image("polarbear")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .tiger)}, label: {
                                    Image("tiger")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                            }
                            GridRow{
                                Button(action: {SoundManager.instance.playsound(sound: .wolf)}, label: {
                                    Image("wolf")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                                Button(action: {SoundManager.instance.playsound(sound: .zebra)}, label: {
                                    Image("zebra")
                                        .resizable()
                                        .aspectRatio(contentMode: .fit)
                                        .cornerRadius(15)
                                })
                            }
                            
                        }
                        .padding()
                        Text("Letters")
                            .font(.system(size: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                        Text("Numbers")
                            .font(.system(size: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                        Text("Shapes")
                            .font(.system(size: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                        Text("Colors")
                            .font(.system(size: 48))
                            .minimumScaleFactor(0.01)
                        Grid{
                        }
                        .padding()
                    }
                }
                VStack{
                    Image("zebra")
                        .scaledToFit()
                    Text("Example")
                }
                .frame(maxWidth: .infinity)
            }
        }
    }
}

#Preview {
    SoundBootcamp()
}

作为Swift新手,我找不到问题的切入点,也不知道怎么解决这两个问题,希望能得到技术指导,或者适合新手的学习资源。

内容的提问来源于stack exchange,提问作者Peter

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 08:42:07