SwiftUI:ListItem手势 [英] SwiftUI: ListItem gestures

问题描述

目标是具有以下行为的修改:

Target is a modification with the following behavior:

(但只有2个按钮-左侧1个，右侧1个)

(but only with 2 buttons - 1 on the left side, 1 on the right)

行为:

• 短按可显示按钮，并使用户可以单击按钮.

• short swipe shows the buttons and gives the user the ability to click it.

长时间长按按钮.

使用2个手指手势的能力

ability to use 2 finger gesture

最小的可复制示例:

import SwiftUI

public extension View {
    func SwiperizeItem(closureL: @escaping () -> (), closureR: @escaping () -> ()) -> 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: () -> Void
    @State var closureR: () -> Void
    
    func body(content: Content) -> some View {
        HStack{
            Button(action: { closureL() } ) {
                Text("Left")
                    .foregroundColor(ForeColorL)
                    
            }
            .background(BackL)
            .frame(maxWidth: dragOffset.width > 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 > 0 ) {
                                    if ( dragOffset.width < offset1Shown.width) {
                                        self.dragOffset = .zero
                                    }
                                    else if ( dragOffset.width > offset1Shown.width &&  dragOffset.width < offset1Click.width ) {
                                        self.dragOffset = offset1Shown
                                    }
                                    else if ( dragOffset.width > offset1Click.width ) {
                                        self.dragOffset = .zero
                                        closureR()
                                    }
                                }
                                else {
                                    if ( dragOffset.width > offset2Shown.width) {
                                        self.dragOffset = .zero
                                    }
                                    else if ( dragOffset.width < offset2Shown.width && dragOffset.width > offset2Click.width ) {
                                        self.dragOffset = offset2Shown
                                    }
                                    else if ( dragOffset.width < offset2Click.width ) {
                                        self.dragOffset = .zero
                                        closureL()
                                    }
                                }
                            }
                )
        
        }
    }
}



// ____________________

struct GuestureItem_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            Text("Hello")
                .padding(.all, 30)
                .background( Color( NSColor.red ) )
                .SwiperizeItem(closureL: { print("click left") }, closureR: { print("click right") })
        }
    }
}

所以...我的问题是:

So... my problems are:

1. 使用SwiftUI在此处绘制按钮:

我认为解决方案可能与SwiftUI组件的新版本有关: LazyHGrid 或 OutlineGroup . https://developer.apple.com/videos/play/wwdc2020/10031

.onDelete()对我来说不是解决方案，因为不可能做两个侧面按钮，也不能编辑删除"按钮.文字

.onDelete() is not a solution for me because it's impossible to do 2 side buttons and impossible to edit "delete" text

1. 如何使用swiftUI滑动两根手指?(不太重要)

推荐答案

不幸的是，到目前为止(从SwiftUI 2 beta版开始)还没有任何本机的SwiftUI解决方案.

Unfortunately there isn't any native SwiftUI solution so far (as of SwiftUI 2 beta).

• SwiftUI-仍然不支持自定义滑动操作
• 如何配置列表"onDelete"?动作/按钮?
• SwiftUI - 列表编辑模式 - 如何更改删除按钮标题?

您可以使用 UIKit 进行自定义滑动操作，并将其包装在 UIViewRepresentable 中.

You can make your custom swipe actions using UIKit and wrap them in UIViewRepresentable.

一些解决方案(您可能已经看过):

Some solutions (you may have seen them already):

• SwiftUI-列表中的自定义滑动动作
• 创建手势以使用SwiftUI编辑列表项

或者您也可以只使用一个库(至少在开发本机解决方案之前).

Or you can just use a library instead (at least until a native solution is developed).

一些库:

• SwipeCell (SwiftUI)(可能正是您所需要的)
• SwipeCellKit (UIKit)

• SwipeCell (SwiftUI) (may be exactly what you need)
• SwipeCellKit (UIKit)

如果要实现同时滑动手势，则需要再次使用 UIViewRepresentable :

If you want to implement simultaneous swipe gesture you need to use UIViewRepresentable again:

• 如何在SwiftUI中检测点击手势位置?(仅用于点击手势，但有很好的解释)
• SwiftUI:多点触摸手势/多种手势(这是上述内容的改编，但带有滑动手势)

• How to detect a tap gesture location in SwiftUI? (this is for tap gestures only but with nice explanation)
• SwiftUI: Multitouch gesture / Multiple Gestures (this is the adaptation of the above but with swipe gestures)

总结

• 回答第一个问题: SwipeCell
• 回答第二个问题: SwiftUI:多点触摸手势/多种手势

这篇关于SwiftUI:ListItem手势的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！