title: SwiftUI: ListItem gestures
body: <p>Target is a modification with the following behavior:</p>
  <p><a href="https://i.stack.imgur.com/xATNM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xATNM.gif" alt="enter image description here" /></a></p>
  <p>(but only with 2 buttons - 1 on the left side, 1 on the right)</p>
  <p>Behavior:</p>
  <ul>
  <li><p>short swipe shows the buttons and gives the user the ability to click it.</p>
  </li>
  <li><p>strong long swipe presses button.</p>
  </li>
  <li><p>ability to use 2 finger gesture</p>
  </li>
  </ul>
  <hr />
  <p>Minimal reproducible example:</p>
  <pre><code>import SwiftUI
  
  public extension View {
      func SwiperizeItem(closureL: @escaping () -&gt; (), closureR: @escaping () -&gt; ()) -&gt; some View
      {
          self.modifier( SwiperizeItemModifier(closureL: closureL, closureR: closureR) )
      }
  }
  
  struct SwiperizeItemModifier: ViewModifier {
      @State var dragOffset = CGSize.zero
      
      @State var offset1Shown = CGSize(width: 100, height: 0)
      @State var offset1Click = CGSize(width: 250, height: 0)
      
      @State var offset2Shown = CGSize(width: -100, height: 0)
      @State var offset2Click = CGSize(width: -250, height: 0)
      
      @State var BackL = Color.green
      @State var BackR = Color.red
      @State var ForeColorL = Color.white
      @State var ForeColorR = Color.white
      
      @State var closureL: () -&gt; Void
      @State var closureR: () -&gt; Void
      
      func body(content: Content) -&gt; some View {
          HStack{
              Button(action: { closureL() } ) {
                  Text(&quot;Left&quot;)
                      .foregroundColor(ForeColorL)
                      
              }
              .background(BackL)
              .frame(maxWidth: dragOffset.width &gt; 0 ? dragOffset.width : 0)
              .fixedSize()
              
              
              content
                  //.padding([.leading, .trailing], 20)
                  .animation(.spring())
                  .offset(x: self.dragOffset.width)
                  .gesture(DragGesture()
                              .onChanged(){
                                  value in
                                  self.dragOffset = value.translation
                              }
                              .onEnded(){
                                  value in
                                  if ( dragOffset.width &gt; 0 ) {
                                      if ( dragOffset.width &lt; offset1Shown.width) {
                                          self.dragOffset = .zero
                                      }
                                      else if ( dragOffset.width &gt; offset1Shown.width &amp;&amp;  dragOffset.width &lt; offset1Click.width ) {
                                          self.dragOffset = offset1Shown
                                      }
                                      else if ( dragOffset.width &gt; offset1Click.width ) {
                                          self.dragOffset = .zero
                                          closureR()
                                      }
                                  }
                                  else {
                                      if ( dragOffset.width &gt; offset2Shown.width) {
                                          self.dragOffset = .zero
                                      }
                                      else if ( dragOffset.width &lt; offset2Shown.width &amp;&amp; dragOffset.width &gt; offset2Click.width ) {
                                          self.dragOffset = offset2Shown
                                      }
                                      else if ( dragOffset.width &lt; offset2Click.width ) {
                                          self.dragOffset = .zero
                                          closureL()
                                      }
                                  }
                              }
                  )
          
          }
      }
  }
  
  
  
  // ____________________
  
  struct GuestureItem_Previews: PreviewProvider {
      static var previews: some View {
          Group {
              Text(&quot;Hello&quot;)
                  .padding(.all, 30)
                  .background( Color( NSColor.red ) )
                  .SwiperizeItem(closureL: { print(&quot;click left&quot;) }, closureR: { print(&quot;click right&quot;) })
          }
      }
  }
  
  </code></pre>
  <p>So... my problems are:</p>
  <ol>
  <li>to draw buttons like here using SwiftUI:</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/rJU54.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rJU54.gif" alt="enter image description here" /></a></p>
  <blockquote>
  <p>I think the solution may be related to the new release of SwiftUI components: <code>LazyHGrid</code> or <code>OutlineGroup</code>.  <a href="https://developer.apple.com/videos/play/wwdc2020/10031" rel="nofollow noreferrer">https://developer.apple.com/videos/play/wwdc2020/10031</a></p>
  </blockquote>
  <blockquote>
  <p>.onDelete() is not a solution for me because it's impossible to do 2 side buttons and impossible to edit &quot;delete&quot; text</p>
  </blockquote>
  <ol start="2">
  <li>how to make 2 fingers swipe using swiftUI? (less important)</li>
  </ol>