主页 / coding / 问题 / 79001042
Accepted
Ahmed Zaidan
Asked: 2024-09-19 13:51:59 +0800 CST

手势阻止列表滑动操作

  • 772

我有一个视图，其中每个列表项都有前/后滑动操作。当我向视图添加拖动手势识别器时，滑动操作变得很难触发。我想向视图添加拖动手势，以允许自定义边缘（左或右）滑动导航到其他视图。我只需要这个拖动手势来识别屏幕的左边缘和右边缘（灰色代表这一点）。如何在有边缘滑动手势的情况下正常触发滑动操作？

import SwiftUI

struct swipeTest: View {
    @State var offset = 0.0
    var body: some View {
        VStack {
            List {
                ForEach(0..<60, id: \.self) { _ in
                    RoundedRectangle(cornerRadius: 10)
                        .frame(height: 50).foregroundStyle(.blue).padding(15)
                        .swipeActions(edge: .trailing) {
                            Button(action: {
                                
                            }, label: {
                                Image(systemName: "bell")
                            }).tint(.orange)
                        }
                        .swipeActions(edge: .leading) {
                            Button(action: {
                              
                            }, label: {
                                Image(systemName: "pin")
                            }).tint(.green)
                        }
                }
            }.listStyle(.plain)
        }
        .offset(x: offset)
        .overlay(alignment: .leading, content: {
            // Only need swipe on very left edge
            Color.gray.opacity(0.3).frame(width: 15)
        })
        .overlay(alignment: .trailing, content: {
            // Only need swipe on very right edge
            Color.gray.opacity(0.3).frame(width: 15)
        })
        .simultaneousGesture (
            DragGesture()
                .onChanged({ value in
                    let width = widthScreen()
                    
                    if value.startLocation.x < 15.0 || value.startLocation.x > (width - 15.0) {
                        offset = value.translation.width
                    }
                })
                .onEnded({ value in
                    offset = 0.0
                })
        )
    }
}

func widthScreen() -> CGFloat {
    let scenes = UIApplication.shared.connectedScenes
    let windowScene = scenes.first as? UIWindowScene
    let window = windowScene?.windows.first
    return window?.screen.bounds.width ?? 0
}


#Preview {
    swipeTest()
}
swift

1 个回答

  1. Best Answer

    您已经添加了灰色覆盖来指示自定义拖动手势应在何处激活，因此只需将手势添加到那些Color.gray位置即可！

    当然，在实际代码中，您可能希望使用Color.clear来向用户隐藏该区域。以下是示例：

    struct SwipeTest: View {
    @GestureState var offset = 0.0
    var body: some View {
        VStack {
            List {
                ForEach(0..<60, id: \.self) { _ in
                    RoundedRectangle(cornerRadius: 10)
                        .frame(height: 50).foregroundStyle(.blue).padding(15)
                        .swipeActions(edge: .trailing) {
                            Button(action: {
                                
                            }, label: {
                                Image(systemName: "bell")
                            }).tint(.orange)
                        }
                        .swipeActions(edge: .leading) {
                            Button(action: {
                              
                            }, label: {
                                Image(systemName: "pin")
                            }).tint(.green)
                        }
                }
            }.listStyle(.plain)
        }
        .offset(x: offset)
        .overlay(alignment: .leading) { dragRegion }
        .overlay(alignment: .trailing) { dragRegion }
        .animation(.default, value: offset)
    }
    
    var dragRegion: some View {
        let gesture = DragGesture().updating($offset) { value, state, transaction in
            state = value.translation.width
            transaction.disablesAnimations = true
        }
        return Color.clear
            .frame(width: 15)
            .contentShape(Rectangle())
            .gesture(gesture)
    }
}

    请注意，我已将其更改offset为@GestureState，因为您的代码在手势结束后将其重置为 0。我还擅自添加了偏移反弹时的动画。在您的实际代码中，您说您想要“导航到其他视图”，但仅从您的问题来看，您到底想怎么做还不清楚，所以我将这部分留给您自己决定。

    • 1

相关问题