SwiftUI List行内SwipeActions范围调整问题求助

默认情况下，SwiftUI List的swipeActions会绑定到整行（全屏宽度），导致滑动从屏幕边缘就能触发。要实现仅在行内容区域内触发滑动操作，只需将swipeActions附加到自定义的行内容视图上，而非直接绑定到List的行容器。

实现步骤 #

1. 定义独立的行内容视图，控制其宽度和样式，使其不占满整个屏幕宽度。
2. 在List的行容器中，通过Spacer调整行内容的位置（居中/左对齐），并将swipeActions添加到自定义内容视图上。

代码示例 #

原问题代码（全屏滑动触发）

struct Item: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    @State private var items = [Item(name: "Item 1"), Item(name: "Item 2"), Item(name: "Item 3")]
    
    var body: some View {
        List(items) { item in
            Text(item.name)
                .swipeActions(edge: .trailing) {
                    Button("Delete") {
                        if let index = items.firstIndex(where: { $0.id == item.id }) {
                            items.remove(at: index)
                        }
                    }
                    .tint(.red)
                }
        }
    }
}

修改后的代码（仅行内容触发滑动）

struct Item: Identifiable {
    let id = UUID()
    let name: String
}

struct ContentView: View {
    @State private var items = [Item(name: "Item 1"), Item(name: "Item 2"), Item(name: "Item 3")]
    
    var body: some View {
        List(items) { item in
            // 用HStack+Spacer控制行内容的位置和宽度
            HStack {
                Spacer()
                CustomRowContent(item: item)
                    .swipeActions(edge: .trailing) {
                        Button("Delete") {
                            if let index = items.firstIndex(where: { $0.id == item.id }) {
                                items.remove(at: index)
                            }
                        }
                        .tint(.red)
                    }
                Spacer()
            }
            .listRowSeparator(.hidden) // 隐藏默认全屏分隔线
        }
        .listStyle(.plain)
    }
}

// 自定义行内容视图，控制样式和宽度
struct CustomRowContent: View {
    let item: Item
    
    var body: some View {
        HStack {
            Image(systemName: "square.and.pencil")
            Text(item.name)
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
        .frame(maxWidth: 300, alignment: .leading) // 限制最大宽度
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
        .overlay(
            Divider() // 自定义行分隔线
                .padding(.top, 40)
        )
    }
}

关键原理 #

• List的默认行容器是全屏宽度的，直接绑定swipeActions会导致触发区域覆盖整个屏幕。
• 将swipeActions附加到自定义内容视图后，滑动触发区域会被限制在该视图的边界内。
• 通过Spacer和frame控制行内容的显示位置和宽度，让视觉效果与滑动触发范围保持一致。

额外调整 #

• 如果需要行内容左对齐，只需去掉左侧的Spacer即可：

HStack {
    CustomRowContent(item: item)
        .swipeActions(edge: .trailing) { /* ... */ }
    Spacer()
}

• 可根据需求调整CustomRowContent的背景色、圆角、内边距等样式，匹配你的UI设计。

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