ios SwiftUI点击网格中的图像并显示相邻帧(自闭症儿子的第一个应用程序)

所以这是我第一次尝试使用swift，对我来说也是一次学习的经历。我希望最终能为我的自闭症儿子使用这个非常简单的应用程序。我们的目标是在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()
}

感谢您发布代码。
您可能需要考虑尝试避免代码中的如此多的重复。例如，您可以使用一个函数来创建每个按钮。例如：

private func gridButton(imageName: String, sound: SoundManager.SoundOption) -> some View {
    Button(action: {SoundManager.instance.playsound(sound: sound)}, label: {
        Image(imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .cornerRadius(15)
    })
}

要在视图中的其他位置将所选项目显示为大图像，您只需要一个状态变量，每当按下按钮时可以更新该变量。例如：

struct SoundBootcamp: View {

    @State private var selectedImageName: String?

    private func gridButton(imageName: String, sound: SoundManager.SoundOption) -> some View {
        // see notes
    }

    var body: some View {
        VStack{
            Text("First Test Application")
                .lineLimit(1)
                .padding(10)
                .font(.system(size: 500))
                .minimumScaleFactor(0.01)
            HStack{
                ScrollView{
                    // content as before
                }
                VStack{

                    // Show the selected image here
                    if let selectedImageName {
                        Image(selectedImageName)
                            .scaledToFit()
                    }
                    Text("Example")
                }
                .frame(maxWidth: .infinity)
            }
        }
    }
}

然后可以更新创建按钮的函数，以在按钮回调中设置图像。大概是这样的：

private func gridButton(imageName: String, sound: SoundManager.SoundOption) -> some View {
    Button {
        SoundManager.instance.playsound(sound: sound)
        selectedImageName = imageName
    } label: {
        Image(imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .cornerRadius(15)
    }
}

EDIT* 在您的评论之后，如果您要使用该函数创建按钮，则第一个网格行将显示如下：

GridRow{
    gridButton(imageName: "airliner", sound: .cheetah)
    gridButton(imageName: "biplane", sound: .cheetah)
    gridButton(imageName: "cargoplane", sound: .cheetah)
    gridButton(imageName: "gliderplane", sound: .cheetah)
}

您可能还想考虑的是将不同的网格部分分解为单独的计算属性。这可能会使管理代码变得更容易。例如：

var aircraft: some View {
    VStack{
        Text("Aircraft")
            .font(.system(size: 48))
            .minimumScaleFactor(0.01)
        Grid{
            GridRow {
                gridButton(imageName: "airliner", sound: .cheetah)
                gridButton(imageName: "biplane", sound: .cheetah)
                gridButton(imageName: "cargoplane", sound: .cheetah)
                gridButton(imageName: "gliderplane", sound: .cheetah)
            }
            GridRow {
                // middle row
            }
            GridRow {
                // last row
            }
        }
        .padding()
    }
}

var animals: some View {
    // like aircraft
}

// + other sections in a similar way

滚动部分可以简化为：

ScrollView {
    VStack {
        aircraft
        animals
        letters
        numbers
        shapes
        colors
    }
}

ios SwiftUI点击网格中的图像并显示相邻帧(自闭症儿子的第一个应用程序)

1条答案

相关问题

热门标签

最新问答