Dynamically add elements to VStack in SwiftUI

Question

(Swift 5, SwiftUI) If I have the following code for a VStack:

struct ContentView: View {

var body: some View {

    ScrollView {
        VStack(alignment: .leading) {

                //Inside of VStack

        }.padding()
        .padding(.bottom, keyboard.currentHeight)
        .edgesIgnoringSafeArea(.bottom)
        .animation(.easeOut(duration: 0.16))
    }
}
}

How can I dynamically add Text()s to the VStack through a function and update the ScrollView height accordingly?

The function (is called by a button press):

func add() -> Void {
    //Adds a Text() element to the VStack. The content of the Text() is received from an API 
    //call, so it can't be hardcoded.
}

I'm looking for a simple way to add Text() elements to my VStack. I've extensively searched for the problem on Google but found nothing similar to this trivial problem. Any help would be appreciated.

This is related: stackoverflow.com/questions/61895745/…. In a nutshell, you don't add a View, but rather modify the state, and the View reacts to it. — New Dev
– New Dev, Commented May 28, 2020 at 3:34

Asperi · Accepted Answer · 2020-05-28 03:34:54Z

6

Here is a demo of possible solution. Tested with Xcode 11.4

struct ContentView: View {
    @State private var texts: [String] = [] // storage for results
    var body: some View {

        ScrollView {
            VStack(alignment: .leading) {
                ForEach(texts, id: \.self) { text in // show received results
                    Text(text)
                }
            }.frame(maxWidth: .infinity)  // << important !!
            .padding()
                .padding(.bottom, keyboard.currentHeight)
                .edgesIgnoringSafeArea(.bottom)
                .animation(.easeOut(duration: 0.16))
        }
    }

    func add() -> Void {
        // store result string (must be on main queue)
        self.texts.append("result")
    }
}

answered May 28, 2020 at 3:34

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

aryanm Over a year ago

Your answer has helped me a lot. However, is it possible for me to use multiple Text()s in the ForEach loop? When I try it, I get an error saying "Type '()' cannot conform to 'View'; only struct/enum/class types can conform to protocols".

Asperi Over a year ago

@ElectroMonkey, what do you mean by "multiple Text"? ForEach already creates multiple Text, one per data in integrating array, so once you add new string into array, new Text will be created by ForEach.

karthikeyan Over a year ago

@Asperi can u check this stackoverflow.com/questions/68325402/…

Leslie Godwin Over a year ago

Place the Texts into a container like a Stack, and then return the container as the cell's View.

Collectives™ on Stack Overflow

Dynamically add elements to VStack in SwiftUI

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related