如何解决SwiftUI列表重排时的背景伪影与行消失问题

问题场景 #

在iOS 17.4、Xcode 15.4（15F31d）环境下，使用SwiftUI的List组件实现行重排时遇到两个视觉问题：

• 拖动行时，自定义行周围出现白色背景
• 拖动重排行时，List中的该行消失

需保留页面线性渐变背景，原实现代码如下：

import SwiftUI
import SwiftData

struct PrioritizeAreas: View {
    @State private var categories: [CategoryItem] = [CategoryItem(category: "A", sortOrder: 0),
                                                     CategoryItem(category: "B", sortOrder: 1),
                                                     CategoryItem(category: "C", sortOrder: 2)]
    
    var body: some View {
        ZStack {
            LinearGradient(colors: [.green, .indigo], startPoint: .top, endPoint: .bottom).ignoresSafeArea()
            
            List {
                ForEach(categories) { item in
                    Text(item.category)
                        .font(.system(size: 14, weight: .semibold, design: .rounded))
                        .foregroundStyle(Color.white)
                        .frame(height: 42)
                        .padding(.horizontal)
                        .frame(maxWidth: .infinity)
                        .background {
                            RoundedRectangle(cornerRadius: 22)
                                .foregroundStyle(.orange.blendMode(.normal).opacity(1))
                        }
                }
                .onMove { indices, newOffset in
                    categories.move(fromOffsets: indices, toOffset: newOffset)
                }
                .listRowSeparator(.hidden)
                .listRowInsets(EdgeInsets(top: 4, leading: 0, bottom: 4, trailing: 0))
                .listRowBackground(Color.clear)
            }
            .listStyle(.insetGrouped)
            .scrollContentBackground(.hidden)
        }
    }
    
    private struct CategoryItem: Identifiable {
        var id = UUID()
        let category: String
        let sortOrder: Int
    }
}

#Preview {
    NavigationStack {
        PrioritizeAreas()
    }
}

修复方案 #

关键问题分析 #

1. 白色背景：来自List行拖动状态下的默认高亮样式，与自定义行背景冲突
2. 行消失：.insetGrouped列表样式的容器布局，与自定义行的无边距设置不兼容，导致拖动时渲染异常

修改后的完整代码 #

import SwiftUI

struct PrioritizeAreas: View {
    @State private var categories: [CategoryItem] = [CategoryItem(category: "A", sortOrder: 0),
                                                     CategoryItem(category: "B", sortOrder: 1),
                                                     CategoryItem(category: "C", sortOrder: 2)]
    
    var body: some View {
        ZStack {
            LinearGradient(colors: [.green, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
            
            List {
                ForEach(categories) { item in
                    Text(item.category)
                        .font(.system(size: 14, weight: .semibold, design: .rounded))
                        .foregroundStyle(Color.white)
                        .frame(height: 42)
                        .padding(.horizontal)
                        .frame(maxWidth: .infinity)
                        .background {
                            RoundedRectangle(cornerRadius: 22)
                                .foregroundStyle(.orange)
                        }
                        .contentShape(RoundedRectangle(cornerRadius: 22)) // 让交互区域与自定义背景完全匹配
                }
                .onMove { indices, newOffset in
                    categories.move(fromOffsets: indices, toOffset: newOffset)
                }
                .listRowSeparator(.hidden)
                .listRowInsets(EdgeInsets(top: 4, leading: 16, bottom: 4, trailing: 16)) // 给行添加合理左右内边距
                .listRowBackground(Color.clear) // 强制行背景透明，覆盖所有状态
            }
            .listStyle(.plain) // 替换分组样式为纯列表，避免额外容器干扰
            .scrollContentBackground(.hidden)
        }
    }
    
    private struct CategoryItem: Identifiable {
        var id = UUID()
        let category: String
        let sortOrder: Int
    }
}

#Preview {
    NavigationStack {
        PrioritizeAreas()
    }
}

核心修改点说明 #

• 替换.insetGrouped为.plain列表样式：消除分组布局带来的隐藏容器，避免拖动时的渲染冲突
• 添加.contentShape：确保拖动交互区域与自定义圆角背景完全一致，防止触发默认高亮区域
• 调整listRowInsets：给行添加合理左右内边距，避免内容贴紧屏幕边缘，同时解决拖动时的布局偏移问题
• 简化背景样式：去掉不必要的blendMode和opacity设置，保持样式简洁

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