im using stepper to add the number of items for a check out Im creating, but I can't seem to link the total amount with the items.

That's the output of your app.

Please show the code that produce this output.

@State private var pentitle = "total pens"
@State private var penText = "Choose up to 250 pens"
@State private var penvalue = 0
 var totalAmount = 0
let penStep = 1
let penrange = 0...250
 Section{
                    Text("\(totalAmount)").font(.largeTitle)
                }
 Section{
                            VStack(spacing: 20) {
                                VStack{
                                    Text(pentitle).font(.largeTitle).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
                                        .padding(.bottom,10)
                                    Text("\(penvalue) Pens").font(.title2).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)
                                }.padding(.bottom,5)
                                Stepper(penText, value:$penvalue, in: penrange, step: penStep).foregroundColor(.darkStart).padding(.horizontal,150)
                            }
                        }.padding(.top,20).padding(.bottom,20)

Can you show buildable code?

As far as I check the code, it has only one Stepper, so total amount does not make sense.
Please show the code that produce EX., including sample data would be welcome.

Hi Chris,

From your initial post, it looks like you want to create an app with a store sort of thing? If that's the case, I would recommend using EnvironmentObject for the number of pens etc. This is what I came up with:

Code Block 
class StationaryStore: ObservableObject {
  @Published private(set) var total: Double = 0
   
  @Published private(set) var pens: Double = 0
  @Published private(set) var watches: Double = 0
  @Published private(set) var markers: Double = 0
   
  @Published private var penPrice: Double = 20
  @Published private var watchPrice: Double = 200
  @Published private var markerPrice: Double = 10
   
  enum product {
    case pen
    case watch
    case marker
  }
   
  func add(_ product: product, _ quantity: Double) {
    switch product {
      case .pen:
        pens += quantity
        total += penPrice
      case .watch:
        watches += quantity
        total += watchPrice
      case .marker:
        markers += quantity
        total += markerPrice
    }
  }
   
  func remove(_ product: product, _ quantity: Double) {
    switch product {
      case .pen:
        pens -= quantity
        total -= penPrice
      case .watch:
        watches -= quantity
        total -= watchPrice
      case .marker:
        markers -= quantity
        total -= markerPrice
    }
  }
   
}
struct ContentView: View {
  var store = StationaryStore()
   
  var body: some View {
    PurchaseView().environmentObject(store)
  }
}
struct PurchaseView: View {
  @EnvironmentObject var store: StationaryStore
  var body: some View {
    VStack {
      Stepper("Pens", onIncrement: {
          store.add(.pen, 1)
        }, onDecrement: {
          self.store.pens != 0 ? store.remove(.pen, 1) : nil
        }).padding(10)
      Stepper("Watches", onIncrement: {
          store.add(.watch, 1)
        }, onDecrement: {
          self.store.watches != 0 ? store.remove(.watch, 1) : nil
        }).padding(10)
      Stepper("Pens", onIncrement: {
          store.add(.marker, 1)
        }, onDecrement: {
          self.store.markers != 0 ? store.remove(.marker, 1) : nil
        }).padding(10)
       
      // For testing (instead of checkout View -
      // don't have time to code it)
       
      Text("Pens: \(self.store.pens)")
      Text("Watches: \(self.store.watches)")
      Text("Markers: \(self.store.markers)")
      Text("Total: \(self.store.total)")
    }
  }
}

As you can see, in ContentView, a new instance of Store is created, then passed to each view you'd like (only PurchaseView at the moment) so it can be accessed. This means the store data you modify in purchase view can be easily accessed in your eventual CheckoutView. I also made the Store's variables private(set) meaning they are read-only outside of the class. The only thing that modifies those variables are the add() and remove() functions I added within that class. This will help prevent bugs :)

Any other questions, feel free to reply. I also welcome corrections or additions from other people!

Ed

p.s. There is probably a more efficient way of ensuring steppers with custom functionality don't go below zero... but this is just a base.

struct utiView: View {

    @State private var markTitle = "marker"

    @State private var papertitle = "paper"

    @State private var paperText = "Choose up to 250 papers"

    @State private var papervalue = 0

    @State private var penvalue = 0

    @State private var markvalue = 0

    @State private var pentitle = "Pens"

    @State private var penText = "Choose up to 60 pens"

    @State private var marktittle = "Choose up to 10 markers"

    var customtotalAmount = 0

    let markStep = 1

    let paperStep = 1

    let penStep = 1

    let markrange = 0...10

    let penRange = 0...60

    let paperrange = 0...250

    var body: some View {

        VStack{

            Text("Total $\(customtotalAmount)")

            Section{

                VStack{

                    Section{

                        VStack(spacing: 20) {

                            VStack{

                                Text(papertitle).font(.largeTitle).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

                                    .padding(.bottom,10)

                                Text("\(papervalue) Miles").font(.title2).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

                            }.padding(.bottom,5)

                            Stepper(paperText, value:$papervalue, in: paperrange, step: paperStep).foregroundColor(.darkStart).padding(.horizontal,150)

                            

                        }

                    }.padding(.top,20).padding(.bottom,20)

                    Divider()

                    Section{

                        VStack(spacing: 20) {

                            VStack{

                                Text(pentitle).font(.largeTitle).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

                                    .padding(.bottom,10)

                                Text("\(penvalue) pens").font(.title2).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

                            }.padding(.bottom,5)

                            Stepper(penText, value: $penvalue, in: penRange, step: penStep).foregroundColor(.darkStart).padding(.horizontal,150)

                        }

                    }

                    Divider()

                    Section{

                        VStack(spacing: 20) {

                            VStack{

                                Text(markTitle).font(.largeTitle).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

                                    .padding(.bottom,10)

                                Text("\(markvalue) markers").font(.title2).foregroundColor(.darkStart).shadow(color: Color.black.opacity(0.2), radius:10 , x:10 , y:10).shadow(color: Color.white.opacity(0.7), radius: 10, x: -5, y: -5)

                            }.padding(.bottom,5)

                            Stepper(marktittle, value: $markvalue, in: markrange, step: markStep).foregroundColor(.darkStart).padding(.horizontal,150)

                        }

                    }

                }

            }

        }

    }

}

thank you for your help I really appreciate it.

@EDbarnes . IT works!!!! The only thing is that the numbers come out in 7 digits 0.000000 like this. Is there a way this can be solved into 3 digits 0.00 like this? How can I add a observableObject to the checkout view so the total number can appear on the checkout view? every time when I go to Checkout it goes back to 0.000000. and I get a error saying it needs a observableObject

No poblem!

So in line 52:

Code Block 
PurchaseView().environmentObject(store)

This line passes the environment object to the view. You will need to do this for your Checkout view too, so maybe something like:

Code Block language
CheckoutView().environmentObject(store)

And then within CheckoutView, just inside the struct you will need the same as line 57:

Code Block language
@EnvironmentObject var store: StationaryStore

Then you should be able to access store within CheckoutView.

And for your 7 digit issue, all you need is a simple formatter wherever you use the values. No decimal places would look something like this:

Code Block language
Text(String(format: "Pens: %.f", self.store.pens))

And then for total, because it's money, you would I assume want two decimal places like you said, which would just mean replacing "%.f" with "%.2f". Hope this helps Chris! Let me know if I can help anymore, and I can give you my email if you need anymore help, just let me know!

Awesome Thank you Ed!!!!!!! you really helped me a lot, I did have another question. how do you add a limit to the stepper if you don't want them to go beyond a certain number? Ex. choose up to 100.