Home > Blockchain >  (SwiftUI) How can I let user to pick a value from Picker, and then edit it?
(SwiftUI) How can I let user to pick a value from Picker, and then edit it?

Time:01-23

I'm fairly new to swiftUI and I don't fully understand how variables work.

I want to make a Picker, and then when user selects one of the flavours he is able to edit the amount of that flavour below, so the variable amount changes as well (so I can display the current amount in another view).

As you can see right now, the values are random ( 1 - 6 ), but I want to somehow let user make changes to each of them, depends on which one the user selects.

Where you see (current stock:) it should display the stock of selected flavour as well.

Here is my code:


struct UpdateView: View {

    var flavours = ["Romantic Suicide", "Project X", "Psycho", "Covid-19", "Dramalama", "Luxury"]
    @State private var selectedFlavour = "Romantic Suicide"
    
    var romanticSuicide = 3
    var projectX = 2
    var psycho = 1
    var covid19 = 5
    var dramalama = 4
    var luxury = 6

    var body: some View {
        
        
        
        
        ZStack {
            
            Image("BackgroundImage").resizable().scaledToFill().edgesIgnoringSafeArea(.all).opacity(0.2)
            

            VStack {
                        Text("Select flavour").foregroundColor(.white).font(Font.custom("BebasNeue", size: 27))

                        Picker("Please choose a flavour", selection: $selectedFlavour) {
                            ForEach(flavours, id: \.self) {
                                Text($0)
                            }
                        }
                Text("\(selectedFlavour) current stock: 1").foregroundColor(.white).font(Font.custom("BebasNeue", size: 22))}
            
        }.background(.black)
        
    }
}
            
            
            
            
            
        
    


struct UpdateView_Previews: PreviewProvider {
    static var previews: some View {
        UpdateView()
    }
}

Can someone explain me how can I make it? Thanks in advance.

CodePudding user response:

What you can do is create a struct named "FlavourItem" for example that contains 2 variables: flavour and amount.

struct FlavourItem {
    var flavour: String
    var amount: Int
}

Then, as well as you created a @State variable for selectedFlavour you can create one for FlavourItem.

@State var flavourItem: FlavourItem

You can then create the UI to ask the user to enter what he wants and store it in FlavourItem object.

You can start with that code:

import SwiftUI

struct FlavourItem: Hashable { // Neaded to use Picker
var flavour: String
var amount: Double

}

struct ContentView: View {

    // Array of FlavourItems
    var flavours: [FlavourItem] = [
        FlavourItem(flavour: "Romantic Suicide", amount: 1),
        FlavourItem(flavour: "Project X", amount: 2),
        FlavourItem(flavour: "American Psycho", amount: 3),
        FlavourItem(flavour: "Covid 19", amount: 4),
        FlavourItem(flavour: "Dramalama", amount: 5),
        FlavourItem(flavour: "Luxury", amount: 6)
    ]

    @State private var selectedFlavour: FlavourItem = FlavourItem(flavour: "Romantic Suicide", amount: 1)

    var body: some View {
        VStack {
            VStack {
                Text("Select flavour").foregroundColor(.white).font(Font.custom("BebasNeue", size: 27))

                Text("Select flavour").foregroundColor(.white).font(Font.custom("BebasNeue", size: 27))

                Picker("Select flavour", selection: $selectedFlavour) {
                    ForEach(flavours, id: \.self) {
                        Text("\($0.flavour)")
                    }
                }.clipped()

                Text("\(selectedFlavour.flavour) current stock: \(selectedFlavour.amount)").font(Font.custom("BebasNeue", size: 22))

                Slider(value: $selectedFlavour.amount, in: 0...20)
                Text("Current flavour value: \(selectedFlavour.amount)")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
  •  Tags:  
  • Related