You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI:编辑模式下如何禁用多选列表的onDelete效果

解决SwiftUI多选编辑模式下移除左侧红色删除按钮的问题

要在多选(EditMode.selection)模式下隐藏列表左侧的红色删除按钮,你需要精准控制onDelete修饰符的启用时机,只在普通编辑模式(而非多选模式)下启用删除逻辑。以下是具体修改方案:

修改核心代码

将原代码中ForEach的.onDelete修饰符替换为:

.onDelete(perform: editMode == .selection ? nil : deleteProduct)

完整修改后的代码

struct ContentView: View {
    @Environment(\.modelContext) private var modelContext
    
    @Query private var products: [Product]
    
    @State private var selectedProducts: Set<Product> = []
    @State var editMode: EditMode = .inactive

    private func deleteProduct(at offsets: IndexSet) {
        for index in offsets {
            modelContext.delete(products[index])
        }
    }
    
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                NavigationLink(destination: ProductView()) {
                    Text("Add Product")
                }
                .buttonStyle(.borderedProminent)
                .tint(.blue)

                List(selection: $selectedProducts) {
                    ForEach(products, id: \.self) { product in
                        NavigationLink(destination: ProductView(product: product)) {
                                HStack {
                                    Text(product.name)
                                    Spacer()
                                    Text(product.price, format: .currency(code: "PHP"))
                                    Text("QTY: \(String(product.stock))")
                                        .frame(width: 72, alignment: .leading)
                                        .padding(.leading, 8)
                                }
                        }
                    }
                    // 仅在非多选模式下启用删除逻辑
                    .onDelete(perform: editMode == .selection ? nil : deleteProduct)
                }
            }
            .navigationBarTitle("Home")
            .toolbar {
                EditButton()
            }
            .environment(\.editMode, $editMode)
        }
    }
}

原理说明

  • 当editMode处于.selection(多选)状态时,onDelete的perform参数设为nil,SwiftUI会自动隐藏左侧的红色删除按钮。
  • 当editMode切换为普通编辑状态(如.active(.delete))或非编辑状态时,正常启用删除逻辑,显示删除按钮。

额外优化(可选)

如果你想完全区分普通编辑和多选模式的行为,可以细化editMode的判断逻辑:

.onDelete(perform: { offsets in
    if case .active(.delete) = editMode {
        deleteProduct(at: offsets)
    }
})

这种写法仅在普通删除编辑模式下触发删除操作,进一步明确逻辑边界。

内容的提问来源于stack exchange,提问作者Christopher Regner

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.29 19:32:49