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
相关产品推荐
相关产品推荐

