How To Cycle Through Images on Button Click-CodePudding

So I have spent an embarrassing amount of time on this and I come to ask you to save my sanity. I am building an app to conduct evaluations on my blind and visually impaired students. On this particular section, we are testing their color vision (yes most people considered "blind" still have some remaining vision). I want to be able to tap the screen (button) and cycle through the 6 colors that I evaluate. I have tried using a ForEach statement but the closest to success I have gotten leaves me with a screen that is half red and half yellow. The colors are all saved as images in my assets. I also tried to make it to where a rectangle with a frame of .infinity width and height would change colors on tap but that was even less successful. I know this is probably super simple but as you can tell by now... I'm not a veteran at this. Thanks in advance and here is my current code:

    import SwiftUI

    struct colorChange: View {

    @State private var images: [UUID] = []

    var body: some View {
        VStack {
        ForEach(1...6, id: \.self) { image in
            Image("yellow"); Image("green"); Image("blue"); Image("purple"); Image("orange"); Image("red")
            }
            Button(action: {
                self.images.append(UUID())
            }, label: {
                Text("")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            })
        }
        
    }
}

struct colorChange_Previews: PreviewProvider {
    static var previews: some View {
        colorChange()
    }
}

CodePudding user response：

you could try something like this, using the image names in your assets, and 2 buttons to cycle through the images:

struct ColorChange: View {
    @State private var images: [String] = ["yellow", "green", "blue", "purple", "orange", "red"]
    @State private var imgNdx = 0
    
    var body: some View {
        VStack {
            Image(images[imgNdx])
                .frame(width: 333, height: 333) // adjust the size as desired
            
            HStack {
                Button("Next", action: {
                    if imgNdx < images.count-1 {
                        imgNdx  = 1
                    }
                })
                
                Button("Previous", action: {
                    if imgNdx >= 1 {
                        imgNdx -= 1
                    }
                })
            }
        }.buttonStyle(.bordered)
    }
}

or, if you want to tap the images

struct ColorChange: View {
    @State private var images: [String] = ["yellow", "green", "blue", "purple", "orange", "red"]
    @State private var imgNdx = 0
    
    var body: some View {
        Button(action: {
            if imgNdx < images.count-1 {
                imgNdx  = 1
            }
        }, label: {
            Image(images[imgNdx]).frame(width: 333, height: 333) // adjust the size as desired
        })
    }
}