How do you call a function from a subview in SwiftUI?

Question

I have a child/subview which is a template for instances inside the parent view. This child view a is circle that can be moved around the screen by the user. The initial drag of this circle is supposed to call a function in the parent view, which appends a new instance of the child view. Basically, initially moving the circle from its starting position creates a new circle in that start position. Then when you initially move that new one, which was just created, another new circle is created at that starting position again, etc...

How do I call the addChild() function that's in ContentView from the Child view?

Thank you, I appreciate any help.

import SwiftUI

struct ContentView: View {
    
    @State var childInstances: [Child] = [Child(stateBinding: .constant(.zero))]
    @State var childInstanceData: [CGSize] = [.zero]
    @State var childIndex = 0
    func addChild() {
        self.childInstanceData.append(.zero)
        
        self.childInstances.append(Child(stateBinding: $childInstanceData[childIndex]))
        
        self.childIndex += 1
    }
    
    var body: some View {
        ZStack {
            ForEach(childInstances.indices, id: \.self) { index in
                self.childInstances[index]
            }
            
            ForEach(childInstanceData.indices, id: \.self) { index in
                Text("y: \(self.childInstanceData[index].height) : x: \(self.childInstanceData[index].width)")
                    .offset(y: CGFloat((index * 20) - 300))
            }
        }
    }
}

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

import SwiftUI

struct Child: View {
    @Binding var stateBinding: CGSize
    
    @State var isInitalDrag = true
    @State var isOnce = true
    
    @State var currentPosition: CGSize = .zero
    @State var newPosition: CGSize = .zero
    
    var body: some View {
        Circle()
            .frame(width: 50, height: 50)
            .foregroundColor(.blue)
            .offset(self.currentPosition)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        
                        if self.isInitalDrag && self.isOnce {
                            
                            // Call function in ContentView here... How do I do it?
                            ContentView().addChild()
                            
                            self.isOnce = false
                        }
                        
                        self.currentPosition = CGSize(
                            width: CGFloat(value.translation.width + self.newPosition.width),
                            height: CGFloat(value.translation.height + self.newPosition.height)
                        )
                        
                        self.stateBinding = self.currentPosition
                    }
                    .onEnded { value in
                        self.newPosition = self.currentPosition
                        
                        self.isOnce = true
                        self.isInitalDrag = false
                    }
            )
    }
}

struct Child_Previews: PreviewProvider {
    static var previews: some View {
        Child(stateBinding: .constant(.zero))
    }
}

Muhand Jumah · Accepted Answer

Here is what I would do, I would create a function in the second view and invoke it under any circumstance, say when a button in the second view is pressed then invoke this function. And I would pass the function's callback in the main view.

Here is a code to demonstrate what I mean.

import SwiftUI

struct StackOverflow23: View {
    var body: some View {
        VStack {
            Text("First View")
            
            Divider()
            
            // Note I am presenting my second view here and calling its function ".onAdd"
            SecondView()
                // Whenever this function is invoked inside `SecondView` then it will run the code in between these brackets.
                .onAdd {
                    print("Run any function you want here")
                }
        }
    }
}

struct StackOverflow23_Previews: PreviewProvider {
    static var previews: some View {
        StackOverflow23()
    }
}


struct SecondView: View {
    // Define a variable and give it default value
    var onAdd = {}
    
    var body: some View {
        Button(action: {
            // This button will invoke the callback stored in the variable, this can be invoked really from any other function. For example, onDrag call self.onAdd (its really up to you when to call this).
            self.onAdd()
        }) {
            Text("Add from a second view")
        }
    }
    
    
    // Create a function with the same name to keep things clean which returns a view (Read note 1 as why it returns view)
    // It takes one argument which is a callback that will come from the main view and it will pass it down to the SecondView
    func onAdd(_ callback: @escaping () -> ()) -> some View { 
        SecondView(onAdd: callback)
    }
}

NOTE 1: The reason our onAdd function returns a view is because remember that swiftui is based on only views and every modifier returns a view itself. For example when you have a Text("test") and then add .foregroundColor(Color.white) to it, what essentially you are doing is that you are not modifying the color of the text but instead you are creating a new Text with a custom foregroundColor value.

And this is exactly what we are doing, we are creating a variable that can be initialized when calling SecondView but instead of calling it in the initializer we created it as a function modifier that will return a new instance of SecondView with a custom value to our variable.

I hope this makes sense. If you have any questions don't hesitate to ask.

And here is your code modified:

ContentView.swift


import SwiftUI

struct ContentView: View {
    
    @State var childInstances: [Child] = [Child(stateBinding: .constant(.zero))]
    @State var childInstanceData: [CGSize] = [.zero]
    @State var childIndex = 0
    func addChild() {
        self.childInstanceData.append(.zero)
        
        self.childInstances.append(Child(stateBinding: $childInstanceData[childIndex]))
        
        self.childIndex += 1
    }
    
    var body: some View {
        ZStack {
            ForEach(childInstances.indices, id: \.self) { index in
                self.childInstances[index]
                    .onAddChild {
                        self.addChild()
                    }
            }
            
            ForEach(childInstanceData.indices, id: \.self) { index in
                Text("y: \(self.childInstanceData[index].height) : x: \(self.childInstanceData[index].width)")
                    .offset(y: CGFloat((index * 20) - 300))
            }
        }
    }
}

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

Child.swift

import SwiftUI

struct Child: View {
    @Binding var stateBinding: CGSize
    
    @State var isInitalDrag = true
    @State var isOnce = true
    
    @State var currentPosition: CGSize = .zero
    @State var newPosition: CGSize = .zero
    
    var onAddChild = {} // <- The variable to hold our callback
    
    var body: some View {
        Circle()
            .frame(width: 50, height: 50)
            .foregroundColor(.blue)
            .offset(self.currentPosition)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        
                        if self.isInitalDrag && self.isOnce {
                            
                            // Call function in ContentView here... How do I do it?
                            
                            self.onAddChild() <- // Here is your solution
                            
                            self.isOnce = false
                        }
                        
                        self.currentPosition = CGSize(
                            width: CGFloat(value.translation.width + self.newPosition.width),
                            height: CGFloat(value.translation.height + self.newPosition.height)
                        )
                        
                        self.stateBinding = self.currentPosition
                    }
                    .onEnded { value in
                        self.newPosition = self.currentPosition
                        
                        self.isOnce = true
                        self.isInitalDrag = false
                    }
            )
    }
    
// Our function which will initialize our variable to store the callback
    func onAddChild(_ callaback: @escaping () -> ()) -> some View {
        Child(stateBinding: self.$stateBinding, isInitalDrag: self.isInitalDrag, isOnce: self.isOnce, currentPosition: self.currentPosition, newPosition: self.newPosition, onAddChild: callaback)
    }
}

struct Child_Previews: PreviewProvider {
    static var previews: some View {
        Child(stateBinding: .constant(.zero))
    }
}

How do you call a function from a subview in SwiftUI?

Answers (2)

Related Questions