SwiftUI：模拟NavigationLink的Button无法改变ListRowBackgroundColor问题

问题场景 #

在SwiftUI List中自定义模拟NavigationLink行为的Button时，遇到以下问题：

• 点击Button时，listRowBackground颜色无变化；
• 长按状态下，因自定义了ButtonStyle，背景色仍未改变；
• 移除ButtonStyle后，仅长按会切换背景色，短按依旧无效。

需要实现短按、长按均能切换List行背景色，和默认NavigationLink的交互效果一致。

初始测试代码 #

List {
    NavigationButton(imageString: "lock.fill", imageColor: .cyan, text: "Data Protection") {
        // 点击操作
    }
}

private struct NavigationButton: View {
    @Environment(\.colorScheme) var colorScheme
    let imageString: String
    let imageColor: Color
    let text: String
    let action: () -> Void

    var body: some View {
        Button {
            action()
        } label: {
            // Button内容（省略）
        }
        .buttonStyle(NavigationLinkButtonStyle())
    }
}

private struct NavigationLinkButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .listRowBackground(configuration.isPressed ? Color.red.opacity(0.3) : Color.red)
    }
}

注：代码中将listRowBackground设为红色测试，但点击Button时背景仍为List默认颜色。

尝试过的不理想方案 #

曾在NavigationButton外部直接设置listRowBackground：

List {
    NavigationButton(imageString: "lock.fill", imageColor: .cyan, text: "Data Protection") {
        // 点击操作
    }
    .listRowBackground(Color.red)
}

这种方式能显示基础背景色，但需要通过Binding将Button的按压状态传递到外部来修改背景，实现繁琐且不优雅。

正确实现方案 #

核心问题：listRowBackground是List行的修饰符，必须作用于List的直接子视图，而非Button内部元素。需跟踪Button的按压状态，同步切换行背景色。

方案1：利用ButtonStyle传递按压状态 #

通过ButtonStyle的configuration.isPressed同步按压状态，再控制行背景：

List {
    NavigationButton(imageString: "lock.fill", imageColor: .cyan, text: "Data Protection") {
        print("触发点击操作")
    }
}

private struct NavigationButton: View {
    @State private var isPressed = false
    let imageString: String
    let imageColor: Color
    let text: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: imageString)
                    .foregroundColor(imageColor)
                Text(text)
            }
        }
        .buttonStyle(NavigationLinkButtonStyle(isPressed: $isPressed))
        .listRowBackground(isPressed ? Color.red.opacity(0.3) : Color.red)
    }
}

private struct NavigationLinkButtonStyle: ButtonStyle {
    @Binding var isPressed: Bool

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .onChange(of: configuration.isPressed) { newValue in
                isPressed = newValue
            }
    }
}

方案2：手势监听实现（更简洁） #

通过simultaneousGesture监听触摸状态，直接控制行背景：

List {
    NavigationButton(imageString: "lock.fill", imageColor: .cyan, text: "Data Protection") {
        print("触发点击操作")
    }
}

private struct NavigationButton: View {
    @State private var isPressed = false
    let imageString: String
    let imageColor: Color
    let text: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: imageString)
                    .foregroundColor(imageColor)
                Text(text)
            }
        }
        .buttonStyle(PlainButtonStyle()) // 移除系统默认Button样式干扰
        .simultaneousGesture(
            DragGesture(minimumDistance: 0)
                .onChanged { _ in isPressed = true }
                .onEnded { _ in isPressed = false }
        )
        .listRowBackground(isPressed ? Color.red.opacity(0.3) : Color.red)
    }
}

方案说明 #

• 两种方案均将listRowBackground应用于NavigationButton本身（List的直接子视图），确保背景色覆盖整个行；
• 实时跟踪Button的按压状态，同步切换背景色，实现和默认NavigationLink一致的交互效果；
• 方案1更适合需要复用Button样式的场景，方案2则更简洁直接。

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