In this tutorial, we are going to create a custom list with two action buttons that will appear when you swipe a row to the left. We are going to start with one side button. It will be a delete button. Then we can add a second button to show how to add more buttons to the row.

Start a new iOS 14 project, then follow along.

Constants and Variables

Create a new struct of type View and declare the following variables:

struct RowContent : View {
	    let text : String
	    let index : Int
	    let width : CGFloat = 60
	    @Binding var indices : [Int]
	    @State var offset = CGSize.zero
	    @State var scale : CGFloat = 0.5

	    var body : some View {
	    // UI Elements
	    }
	}

• Text: Stores our row’s content.
• index: The row’s index. Used to delete/hide a row.
• width: The width of all the side buttons. Used to know how much to swipe to the left.
• indices: Binding array variable that stores the deleted/hidden rows’ indices.
• offset: Float variable used to move a row to the left when a swipe motion occurs.
• scale: Used to animate the scale of the side buttons when they appear.

#mobile #swift #programming #swiftui #ios