SwiftUI网格图片点击右侧显示及音效播放实现问题(为自闭症儿子开发首应用)
开发自闭症儿童辅助APP的Swift问题
这是我首次尝试用Swift开发应用,目标是给患有自闭症的儿子做一款简单的辅助APP。核心需求:
- iPad左侧展示喜爱物品的网格列表,点击左侧物品后,对应图片要在右侧区域显示
- 点击左侧网格里的图片,或者右侧显示的图片,都能播放该物品名称对应的音效
目前已经完成了部分开发,但右侧还是占位图片,现在卡在两个问题上:
- 实现左侧网格按钮点击后,对应图片在右侧显示
- 确保右侧显示的图片点击时可播放对应音效
附上当前代码:
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
相关产品推荐
相关产品推荐

