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

SwiftUI列表拖动项时如何移除单元格白色背景

解决SwiftUI拖动列表项时的白色背景问题

你可以通过以下两种方式移除拖动时的白色背景:

方法一:自定义单元格内容背景(推荐,局部生效)

将自定义背景直接应用在单元格内容上,同时把列表行的背景设为透明,这样拖动预览会继承内容的背景样式,不会出现白色:

struct TrainingView: View {
    @ObservedObject var plans: Plans
    @State private var search = "" // 补充代码中缺失的搜索状态
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(plans.plans) { plan in
                    Text(plan.name)
                        .padding(.horizontal, 10)
                        .padding(.vertical, 5)
                        .background(Rectangle().fill(.blue)) // 将背景直接绑定到文本组件
                }
                .onMove(perform: move)
                .listRowSeparator(.hidden)
                .listRowBackground(.clear) // 设置列表行背景为透明
            }
            .listStyle(.plain)
            .scrollContentBackground(.hidden)
            .toolbar {
                EditButton()
            }
            .searchable(text: $search)
            .navigationTitle("Test")
        }
    }

    func move(from source: IndexSet, to destination: Int) {
        plans.plans.move(fromOffsets: source, toOffset: destination)
     }
}

方法二:全局修改UITableView拖动预览背景(影响所有列表)

如果希望整个App内所有SwiftUI列表的拖动预览都去掉白色背景,可以在视图初始化时修改UIKit的外观代理:

struct TrainingView: View {
    @ObservedObject var plans: Plans
    @State private var search = ""
    
    init(plans: Plans) {
        self.plans = plans
        // 全局设置拖动预览背景为透明
        UITableView.appearance().dragPreviewBackgroundColor = .clear
    }
    
    var body: some View {
        // 原视图代码保持不变
        NavigationStack {
            List {
                ForEach(plans.plans) { plan in
                    Text(plan.name)
                        .listRowBackground(Rectangle()
                            .background(.clear)
                            .foregroundColor(.blue)
                            .padding(.horizontal, 10)
                            .padding(.vertical, 5)
                        )
                }
                .onMove(perform: move)
                .listRowSeparator(.hidden)
            }
            .listStyle(.plain)
            .scrollContentBackground(.hidden)
            .toolbar {
                EditButton()
            }
            .searchable(text: $search)
            .navigationTitle("Test")
        }
    }

    func move(from source: IndexSet, to destination: Int) {
        plans.plans.move(fromOffsets: source, toOffset: destination)
     }
}

注意:方法二会影响所有基于UITableView的SwiftUI列表,仅当需要全局统一样式时使用,优先推荐方法一实现局部自定义。

内容的提问来源于stack exchange,提问作者David Junker

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.11 19:25:20