Start a Project

How to Display, Add, Edit,Update, Move Data in List Rows using SwiftUI

In this tutorial, we will learn different operations (like: Display, add, update, edit, move) in a List with SwiftUI.

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that’s easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync. Automatic support for Dynamic Type, Dark Mode, localization, and accessibility means your first line of SwiftUI code is already the most powerful UI code you’ve ever written.

A List is a collection of elements that presents rows of data arranged in a single column.

let’s create the List view for displaying UserList and perform all the operations that we have mentioned above.

Getting Started

Swift version: 5
iOS version: 13
Xcode: 11.3

Step 1: Declare a Struct that Store our data.

Identifiable is a protocol whose instances hold the value of an entity with a stable identity and this protocol used to uniquely identify the object.

Step 2: Now Deleare a userlist state and add List in Body.

It stored all the data which display in List.

NavigationView is representing a visible path in a navigation hierarchy where we can add navigation title, button, etc.

Step 3: Now we implement add new item in the List.

First, we add a button on the NavigationView.

Here we have Declare EditMode.inactive object which manages app State. We have Create UIAlertController to get input from the User.

Step 3: Now Update item in the List.

Now, handle the onTapGesture event of the View.

The onClickPress function handles the click event.

Step 4: Now Delete the item from the List.

The onDelete action is responsible for this. We have to pass a closure in onDelete to handle the response.

The onDeletePress is a closure where we actually the data from List.

Step 4: Now we will change the position of the row in the List.

The onMove closure is responsible for this operation.  In other words, we can drag and drop rows in any position.

Conclusion:
We can easily implement show, add, update, edit, move operations in List in SwiftUI and we can provide the look and functionality like UItableView.

Please click here to read more about the basic details of SwiftUI.

I hope this code will help you better to understand about List. If you feel any doubt or query please comment below.

Thank you.

Exit mobile version