Append Items in an Array

#16 - How to do it without using list

Hello SwiftUI explorer!

Welcome back to another post of Learning SwiftUI. This is post number 16, this time I will keep the code talking instead. During the week I discovered (finally), how you can append items without using a list in SwiftUI. So I wanted to share it with you. You need to create some files but I really like the final result.

This is what we will create in this post:

First we need to set up the data model, so create a new file called DataModel and insert the code below.

struct DataModel: Identifiable, Codable {
    let id: String
    var text: String
    
    init(id: String = UUID().uuidString, text: String) {
        self.id = id
        self.text = text
    }
}

Then we need to set up our view model, create a new file called DataViewModel.

class DataViewModel: ObservableObject {
    @Published var textItems: [DataModel] = []
    
    func addText(text: String) {
        let newText = DataModel(text: text)
        textItems.append(newText)
    }
}

Then we need to create our main view where we want everything to show, I call this the HomeView. Create the file, but leave it as it is for now.

struct HomeView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

Next we need to fix our app’s main structure so we can pass data around, add the following code to AppendExamplesApp. You might have another name here, it depends on what you named your project.

@main
struct AppendExamplesApp: App {
    @StateObject var dataViewModel: DataViewModel = DataViewModel()
    
    var body: some Scene {
        WindowGroup {
            NavigationView {
                HomeView()
            }
            .navigationViewStyle(StackNavigationViewStyle())
            .environmentObject(dataViewModel)
        }
    }
}

---

Want to learn more about SwiftUI animations?

I created a book for anyone new to SwiftUI that wants to develop their SwiftUI animation skills. The book cover the basics and more advance techniques to animating objects and views in SwiftUI. Start learning today and get a 30% discount by clicking the link below:

Book Deal! 30% Discount for Learning SwiftUI Animations - The Beginner Roadtrip

---

Next let’s create a view where we can input some text that we want to append. In this view we also create a function that can pass the addSomeText property wrapper to the addText function. The presentationMode added to the button will make the view disappear once the button is pressed. This can be used for any case, just so you know.

struct AddText: View {
    @Environment(\.presentationMode) var presentationMode
    @EnvironmentObject var dataViewModel: DataViewModel
    
    @State var addSomeText: String = ""
    
    var body: some View {
        Form {
            Section(header: Text("Add text")) {
                TextField("Enter your name", text: $addSomeText)
                
                Button(action: {
                    saveTheText()
                }, label: {
                    Text("Save text")
                })
            }
        }
    }
    
    func saveTheText() {
        dataViewModel.addText(text: addSomeText)
        presentationMode.wrappedValue.dismiss()
    }
}

Then we can add a navigation link in our home view file that can take us to our AddText view.

struct HomeView: View {
    var body: some View {
        VStack {
            NavigationLink(destination: AddText(), label: {
                Text("Add")
                    .foregroundColor(.white)
                    .background(
                        Color.blue
                            .frame(width: 175, height: 50)
                            .cornerRadius(10)
                    )
                    .padding(.top, 20)
            })
        }
    }
}

Next we need to create a view that we want to appear in the home view. We set it up so we can input text but let’s make it a little more fun. Create a new view called AppearText.

struct AppearText: View {
    var text: DataModel
    @EnvironmentObject var dataViewModel: DataViewModel
    
    var body: some View {
            Text(text.text)
                .frame(width: 100, height: 100)
                .background(
                    Color.green
                        .cornerRadius(10)
                )
    }
}

And with that in place we can now add our final code to the home view and voila it will run just like in the video at the start of this post.

struct HomeView: View {
    @EnvironmentObject var dataViewModel: DataViewModel
    
    var body: some View {
        NavigationView {
            VStack(spacing: 10) {
                HStack {
                    ForEach(dataViewModel.textItems) { text in
                        AppearText(text: text)
                    }
                    .frame(height: 150)
                }
                
                NavigationLink(destination: AddText(), label: {
                    Text("Add")
                        .foregroundColor(.white)
                        .background(
                            Color.blue
                                .frame(width: 175, height: 50)
                                .cornerRadius(10)
                        )
                        .padding(.top, 20)
                })
            }
        }
    }
}

There you have it, what do you think? I like this and I am already thinking about other ways this can be used. Until next time.

Have a nice day!

Mr SwiftUI