SwiftUI中listRowBackground无法动画？如何实现List行点击高亮淡出

核心问题原因 #

• .background() 修饰符的作用范围默认跟随内容视图的几何边界，不会自动填充List为行预留的全区域容器，因此会出现背景仅贴合内容大小的问题。
• .listRowBackground() 是List布局体系独立托管的行背景视图，默认不继承外层传入的withAnimation动画上下文，直接修改传入的颜色值不会触发平滑过渡。
• 原有点击逻辑存在时序偏差：手势触发时先将hilited设为true，又立刻在动画块内将其切回false，高亮状态没有稳定的展示窗口，即使动画正常也看不到初始高亮效果。

实现思路 #

• 保留.listRowBackground()的全区域填充特性，将动画视图直接作为它的入参。
• 给传入的行背景视图显式绑定动画，绕开List布局不继承动画上下文的限制。
• 调整点击逻辑的时序，先无延迟切入高亮状态，短暂停留后再触发淡出动画，匹配UITableView的原生交互节奏。

可运行的修正代码 #

struct Profile {
    let name: String
    var selected: Bool
    var hilited: Bool = false
}

extension Profile: Identifiable {
    var id: String { name }
}

struct ProfilesPicker: View {
    @State var profiles: [Profile]

    var body: some View {
        List {
            ForEach(0..<profiles.count) { index in
                let profile = profiles[index]

                CheckCell(name: profile.name, checked: profile.selected)
                    .listRowBackground(
                        Color(profile.hilited ? UIColor.systemFill : UIColor.systemBackground)
                            // 给行背景视图直接绑定动画，不依赖外层上下文
                            .animation(.easeOut(duration: 0.3), value: profile.hilited)
                    )
                    .onTapGesture {
                        // 立刻切入高亮、切换选中状态
                        profiles[index].hilited = true
                        profiles[index].selected.toggle()
                        // 短暂停留后触发淡出动画
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                            withAnimation(.easeOut(duration: 0.3)) {
                                profiles[index].hilited = false
                            }
                        }
                    }
            }
        }
    }
}

struct CheckCell: View {
    let name: String
    let checked: Bool

    var body: some View {
        HStack {
            Text(name)
            Spacer()
            if checked {
                Image(systemName: "checkmark")
            }
        }
        .contentShape(Rectangle())
    }
}

实际效果 #

• 点击单元格瞬间，行背景直接切换为系统高亮色，还原UITableView按下时的即时反馈。
• 高亮状态停留100毫秒后，会以300毫秒的缓出动画逐渐淡出到默认行背景色，和原生交互节奏一致。
• 行背景自动铺满List为行预留的全部容器区域，不会出现尺寸裁剪问题。

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