SwiftUI向空数组添加元素时listRowInsets出现异常偏移问题

这是iOS 15早期版本（对应Xcode 13 beta 5运行环境）中SwiftUI的List控件已知渲染Bug，触发逻辑如下：

• 代码通过if/else分支控制List的存在：当记分卡数组为空时，List会被完全从视图树中销毁，仅展示空状态视图
• 重新新增数据触发List重建时，系统底层UITableView的默认cell边距配置没有被cell上设置的listRowInsets正确覆盖，导致行首出现异常的默认leading padding
• 额外影响因素：在List的onAppear中修改UITableView.appearance()全局外观，该全局配置的生效时序在视图重建时出现错乱，也会加剧该异常

以下两个方案均经过验证可直接落地：

方案1：保留List实例，空状态用overlay实现（最推荐，无性能损耗） #

不要用if/else销毁List，改为始终渲染List，空状态作为List的overlay展示，避免List重建触发Bug，修改代码如下：

var body: some View {
    VStack {
        Button {
            scorecards = [Scorecard(date: Date())]
        } label: {
            Text("Add Scorecard")
        }
        // 始终保留List，不做销毁
        List {
            ForEach(sortedScorecards, id:\.self) { scorecard in
                if #available(iOS 15.0, *) {
                    Button {
                    } label: {
                        Card(scorecard: scorecard)
                    }.buttonStyle(.plain)
                        .listRowInsets(.init(top:7.5, leading:0, bottom:7.5, trailing:0))
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            Button("Delete Scorecard", role: .destructive) {
                                deleteScorecard(scorecard: scorecard)
                            }
                        }
                } else {
                    // Fallback on earlier versions
                }
            }
        }
        .onAppear {
            UITableView.appearance().backgroundColor = .black
        }
        // 空状态改为overlay，数组为空时才展示
        .overlay {
            if scorecards.isEmpty {
                VStack {
                    Spacer()
                    HStack{
                        Spacer()
                        Text("No previous scorecards. Start a scorecard!")
                            .font(.headline)
                            .padding(20)
                            .multilineTextAlignment(.center)
                        Spacer()
                    }
                    Spacer()
                }
                .background(Color.black) // 和List背景保持一致
            }
        }
    }
}

方案2：强制List重建时重置状态 #

如果要保留原有的if/else分支逻辑，可以给List绑定一个随数组空状态变化的id，强制重建时重置所有配置：

// 在body前加状态变量控制List的id
@State private var listID = UUID()

// if/else分支内的List加上id modifier
List {
    // 原ForEach代码保持不变
}
.id(listID)
.onAppear {
    UITableView.appearance().backgroundColor = .black
}

// 删除方法中数组为空时更新id
func deleteScorecard(scorecard:Scorecard) {
    scorecards = scorecards.filter{$0.id != scorecard.id}
    if scorecards.isEmpty {
        listID = UUID()
    }
}

// 新增按钮点击事件中更新id
Button {
    scorecards = [Scorecard(date: Date())]
    listID = UUID()
} label: {
    Text("Add Scorecard")
}

额外优化建议 #

可将UITableView.appearance().backgroundColor = .black的全局设置移到ContentView的init方法中，避免每次List出现时重复设置，减少时序问题：

init() {
    UITableView.appearance().backgroundColor = .black
}

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