如何为使用.listRowBackground()自定义的List恢复点击动画

方法一：用.background替代.listRowBackground #

直接给列表项的内容容器添加背景色，同时重置行内边距，既能保留默认点击高亮动画，又能自定义背景：

List {
    Button(action: {
        // do something
    }) {
        HStack {
            Text("Title 1")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(StyleManager.Colors.secondary)
    }
    .listRowInsets(EdgeInsets()) // 重置行内边距让背景充满整行
    
    NavigationLink(value: "Title 2") {
        Text("Title 2")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(StyleManager.Colors.secondary)
    }
    .listRowInsets(EdgeInsets())
}
.someOtherStyles(likeShadows, fonts, etc)

核心是用.frame(maxWidth: .infinity, maxHeight: .infinity)让背景填充整个行范围，再通过.listRowInsets(EdgeInsets())消除默认行内边距，避免背景与行边缘出现空隙。

方法二：自定义高亮动画（适合灵活控制场景） #

如果必须使用.listRowBackground，可以通过监听点击状态，给列表项添加overlay模拟默认高亮效果：

struct HighlightableRow<Content: View>: View {
    let content: Content
    let backgroundColor: Color
    @State private var isHighlighted = false
    
    init(backgroundColor: Color, @ViewBuilder content: () -> Content) {
        self.backgroundColor = backgroundColor
        self.content = content()
    }
    
    var body: some View {
        content
            .listRowBackground(backgroundColor)
            .overlay(
                Color.white.opacity(isHighlighted ? 0.2 : 0) // 模拟默认高亮的半透明白色层
            )
            .simultaneousGesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { _ in isHighlighted = true }
                    .onEnded { _ in isHighlighted = false }
            )
    }
}

// 使用示例
List {
    HighlightableRow(backgroundColor: StyleManager.Colors.secondary) {
        Button(action: {
            // do something
        }) {
            HStack {
                Text("Title 1")
            }
        }
    }
    
    HighlightableRow(backgroundColor: StyleManager.Colors.secondary) {
        NavigationLink(value: "Title 2") {
            Text("Title 2")
        }
    }
}
.someOtherStyles(likeShadows, fonts, etc)

这种方式手动监听点击状态，通过overlay添加高亮效果，适合需要自定义高亮样式的场景。

补充说明 #

.listRowBackground会替换系统默认的行背景视图（包括负责高亮动画的底层视图），因此直接使用会丢失默认动画。方法一通过给内容添加背景，保留了系统默认的行交互层，是最简洁的解决方案；方法二则是手动模拟动画，灵活性更高。

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