SwiftUI列表SwipeActions按钮无法点击，仅完整滑动生效问题求助

问题根源 #

你把swipeActions修饰符附加到了列表行内的Text(debit.name)子视图上，而非整个列表行的根容器（HStack）。这会导致滑动操作的响应范围被限制在Text区域内，按钮的点击交互被行内其他元素干扰，只有完整滑动时才会触发动作。

修复代码 #

将swipeActions移到HStack的修饰符中，绑定到整个列表行：

var listView: some View {
    List {
        ForEach(Array(debits.enumerated()), id: \.element) { index, debit in
            HStack {
                Text(debit.name)
                Spacer()
                Text(String(debit.value))
                    .frame(width: 70, alignment: .trailing)
                Text("€")
                Divider().padding(.leading, 5)
                Toggle("", isOn: $debits[index].toggle)
                    .onChange(of: debits[index].toggle) { newValue in
                        calculateAvailable()
                    }
                    .frame(width: 50)
            }
            // 把swipeActions移到此处，绑定整个列表行
            .swipeActions(allowsFullSwipe: true) {
                Button(action: {
                    print("Hi \(index)")
                }, label: {
                    Image(systemName: "slider.horizontal.3")
                })
            }
        }
    }
    .listStyle(.plain)
    .lineLimit(1)
}

额外优化建议 #

1. 让你的Debit模型遵循Identifiable协议，这样可以简化ForEach的写法，避免使用enumerated()：

struct Debit: Identifiable {
    let id = UUID()
    var name: String
    var value: Double
    var toggle: Bool
}

2. 简化后的ForEach写法：

ForEach($debits) { $debit in
    HStack {
        Text(debit.name)
        Spacer()
        Text(String(debit.value))
            .frame(width: 70, alignment: .trailing)
        Text("€")
        Divider().padding(.leading, 5)
        Toggle("", isOn: $debit.toggle)
            .onChange(of: debit.toggle) { newValue in
                calculateAvailable()
            }
            .frame(width: 50)
    }
    .swipeActions(allowsFullSwipe: true) {
        Button(action: {
            print("Hi \(debit.id)")
        }, label: {
            Image(systemName: "slider.horizontal.3")
        })
    }
}

原理说明 #

当swipeActions附加到列表行的根容器时，滑动操作的响应范围覆盖整个行，按钮的点击区域不会被行内其他子视图遮挡，点击按钮就能正常触发action，同时保持完整滑动触发功能的特性。

内容的提问来源于stack exchange，提问作者LksMrx