Home > Mobile >  Suggest user to add new photo to collection
Suggest user to add new photo to collection

Time:02-22

In my Tinder-like app, the user would be uploading images to his profile, to display for other users.

The max photos will be 3, and once the user uploads a picture, it will create another 'blank screen' with the add button.

Code works perfectly but doesn't create another image upload section.

struct Person: Hashable, Identifiable {
    var personImages: [UIImage?] = []
}

var person: Person

var body: some View {

HStack {
    ForEach(0..<person.personImages.count) { imageIndex in
        RoundedRectangle(cornerRadius: 20)
            .frame(height: 4)
            .foregroundColor(self.imageIndex == imageIndex ? Color.white : Color.gray.opacity(0.5))
    }
  }
}

Here is what imageIndex means:

func updateImageIndex(addition: Bool) {
    let newIndex: Int
    
    if addition {
        newIndex = imageIndex   1
    } else {
        newIndex = imageIndex - 1
    }

    imageIndex = min(max(0, newIndex), person.personImages.count - 1)
}

CodePudding user response:

I can only guess ... but I suppose you want something like this:

struct Person: Hashable {
    var personImages: [UIImage?] = []
}

struct ContentView: View {
    @State private var person = Person()
    
    @State private var imageIndex: Int = 0
    
    var body: some View {
        
        VStack {
            HStack {
                ForEach(person.personImages, id:\.self) { image in
                    RoundedRectangle(cornerRadius: 20)
                        .frame(width: 60, height: 100)
                        .foregroundColor(.blue)
                }
                if person.personImages.count < 3 {
                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .frame(width: 60, height: 100)
                        .foregroundColor(.gray.opacity(0.5))
                    Button(" ") {
                        person.personImages.append(UIImage())
                    }
                }
                }
            }
        }
    }
}
  • Related