SwiftUI列表项自定义背景色同时保留导航链接高亮动画

直接给NavigationLink添加listRowBackground会覆盖系统默认的高亮交互层，导致点击时看不到原生的高亮动画。这里有两种可行的解决方式：

方法1：给导航链接标签设置背景（保留原生动画） #

不用listRowBackground，而是给NavigationLink的标签文本设置撑满整个列表行的背景，这样既实现了行背景色，又不会破坏系统的高亮动画：

struct ContentView: View {
    var body: some View {
        let paleRed = Color(red: 1.0, green: 0.7, blue: 0.7, opacity: 0.3)
        
        NavigationView {
            List {
                NavigationLink {
                    Text("Hello, world!")
                } label: {
                    Text("Goto Hello")
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(paleRed)
                }
            }
        }
    }
}

这里通过frame(maxWidth: .infinity, maxHeight: .infinity)让文本区域撑满整个列表行，再添加背景色，视觉效果和listRowBackground一致，但原生高亮动画完全保留。

方法2：自定义可高亮的行背景 #

如果必须使用listRowBackground，可以通过自定义修饰符，结合高亮状态来组合背景色和高亮层，模拟原生动画效果：

// 自定义修饰符，处理行背景和高亮状态
struct HighlightableRowBackground: ViewModifier {
    let bgColor: Color
    @Environment(\.isHighlighted) private var isHighlighted
    
    func body(content: Content) -> some View {
        content
            .listRowBackground(
                ZStack {
                    bgColor
                    // 高亮时显示覆盖层，可自定义颜色和透明度
                    if isHighlighted {
                        Color(UIColor.systemGray5)
                            .opacity(0.6)
                    }
                }
            )
    }
}

// 给View扩展便捷方法
extension View {
    func highlightableRowBackground(_ color: Color) -> some View {
        modifier(HighlightableRowBackground(bgColor: color))
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        let paleRed = Color(red: 1.0, green: 0.7, blue: 0.7, opacity: 0.3)
        
        NavigationView {
            List {
                NavigationLink("Goto Hello") {
                    Text("Hello, world!")
                }
                .highlightableRowBackground(paleRed)
            }
        }
    }
}

这种方式通过@Environment(\.isHighlighted)监听行的高亮状态，在高亮时叠加一层半透明的颜色，模拟系统的高亮动画效果，同时保留自定义背景色。

总结 #

• 优先选方法1，代码更简洁，完全保留系统原生的交互体验。
• 如果需要对背景和高亮效果做更多自定义，再用方法2实现。

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