SwiftUI: How to make custom Swipe-able Cell

Xcode 12.4 — iOS 14

In this tutorial, We are going to implement custom swipe action in list cell.

We will be using LazyVStack with ScrollView. It is more customisable compare to list.

We are going to divide this problem into following segments

1. Create Simple List View with or without header.
2. Create Custom Action Buttons.
3. Create a view modifier. This view modifier will be used to listen swipe gesture
4. On swipe direction, show/hide relevant buttons
5. Add View extension utility so that we can easily use view modifier.

Simple List View:

We create a custom cell, Which shows cell index. Create a LazyVStack bind with Scroll view to lazily load cells(load only visible cells)

In custom cell, we also add Divider() to make it look like table view cell.

Create Demo Action buttons:

We create simple enum with associated function to fetch button’s view. For this demo we can keeping button width constant. Although, It can be changed.

Create View Modifier for out cells:

This view modifier will wrap the cell content in a ZStack. We will add leading trailing buttons on the edge of cell. on user swipe action we will move the view with following logic:

1. onSwipeChange: Move view until button can fit the view, We calculated total buttons width on right and left 
2. onSwipeEnd: if the button is already visible and swipe is in reverse direction move view to default state
3. onSwipeEnd: if button are not visible and user…