Passing steper value to another View - SwiftUI

Question

I have very simple "app" in SwiftUI

How i can passing stepper value from list to struct SumOfValue or to ContentView ? But i want passing sum of stepper value in case from image will be 8.

struct ContentView: View {
    var body: some View {
        VStack{
            List{
                ProductList()
                ProductList()
                
            }
            Spacer()
            Text("Sum of stepper value: ?????")
                .padding(.bottom, 50
                )
            
            SumOfValue()
        }
    }
}

struct ProductList:View {
    @State var stepperValueTest: Int = 0
    var body: some View {
        HStack {
            Stepper("Value: \(stepperValueTest)", value: $stepperValueTest)
        }   
    }
}

struct SumOfValue: View {
    var body: some View {
        Text("or here sum of value: ????? ")
            .foregroundColor(Color.red)
    }
}

I try use @Binding but didn`t work.

Answer 1

The @State goes in the parent (ContentView), and the @Binding goes in the child (ProductList and SumOfValue).

Try this:

struct ContentView: View {

    /// States here!
    @State var firstStepperValue: Int = 0
    @State var secondStepperValue: Int = 0

    var body: some View {
        VStack{
            List{

                /// pass it in here!
                ProductList(stepperValueTest: $firstStepperValue)
                ProductList(stepperValueTest: $secondStepperValue)
                
            }
            Spacer()

            /// add the values here
            Text("Sum of stepper value: \(firstStepperValue + secondStepperValue)")
                .padding(.bottom, 50
                )
            
            /// you can also pass it in here
            SumOfValue(first: $firstStepperValue, second: $secondStepperValue)
                .padding(.bottom, 100)
        }
    }
}

struct ProductList:View {

    /// Binding here!
    @Binding var stepperValueTest: Int
    var body: some View {
        HStack {
            Stepper("Value: \(stepperValueTest)", value: $stepperValueTest)
        }
    }
}

struct SumOfValue: View {
    @Binding var first: Int
    @Binding var second: Int
    
    var body: some View {
        Text("or here sum of value: \(first + second) ")
            .foregroundColor(Color.red)
    }
}

Result:

Answer 2

There are multiple approaches here, and it's ultimately a question of data organization.

One way to think about is that there is an array of values that a parent - ContentView in your case - "owns", and each child updates their allotted value in that array using a binding. This way, the parent can easily calculate the sum of these values since it has the entire array.

struct ContentView: View {
   @State var values = [0,0,0]

   var body: some View {
      VStack {
         List {
            ProductList(stepperValueTest: $values[0])
            ProductList(stepperValueTest: $values[1])
            ProductList(stepperValueTest: $values[2])
         }
         Text("Sum: \(sum)")
      }
   }

   var sum: Int { values.reduce(0, +) }
}

struct ProductList:View {
    @Binding var stepperValueTest: Int // change to Binding
    var body: some View {
        HStack {
            Stepper("Value: \(stepperValueTest)", value: $stepperValueTest)
        }   
    }
}