SwiftUI添加contextMenu后listRowBackground修改失效问题如何解决？

问题根因 #

listRowBackground是作用于List组件的行容器视图，而非你自定义的行内容视图。当你给行内容添加contextMenu后，SwiftUI的渲染优先级发生变化，行视图内部的@State变量更新时，无法触发上层List行容器的重绘，因此listRowBackground不会响应状态变化。

解决方案 #

方案1（推荐）：将行颜色状态提升到父视图管理 #

把所有行的颜色状态放到List所在的父视图中，行视图改用@Binding绑定颜色，状态更新会触发整个List重绘，listRowBackground自然会生效。
父视图示例代码：

struct ListContainerView: View {
    // 存储所有行的颜色
    @State private var rowColorList: [Color] = Array(repeating: .mint, count: 10)
    private let rowContentList = Array(0..<10).map { "第\($0)行" }
    
    var body: some View {
        List {
            ForEach(0..<rowContentList.count, id: \.self) { index in
                TestRow(
                    rowColor: $rowColorList[index],
                    rowText: rowContentList[index]
                )
                // 把listRowBackground移到父视图的行元素上，逻辑更清晰
                .listRowBackground(rowColorList[index])
            }
        }
    }
}

行视图调整后代码：

struct TestRow: View {
    // 改为绑定父视图的颜色状态
    @Binding var rowColor: Color
    var rowText: String
    
    var body: some View {
        HStack {
            Text(rowText)
            Spacer()
            Image(systemName: "heart.circle.fill")
        }
        .contextMenu {
            Button {
                rowColor = .red
            } label: {
                MenuButton(colorOrb: "red_circle", buttonText: "High")
            }
            Button {
                rowColor = .yellow
            } label: {
                MenuButton(colorOrb: "yellow_circle", buttonText: "Medium")
            }
            Button {
                rowColor = .green
            } label: {
                MenuButton(colorOrb: "green_circle", buttonText: "Normal")
            }
        }
    }
}

方案2：调整自定义背景实现全屏覆盖 #

如果你不想改动状态层级，可以继续用给HStack加背景的方案，只要修改配置让背景铺满整行即可：

struct TestRow: View {
    @State var rowColor: Color = Color.mint
    var rowText: String
    
    var body: some View {
        HStack {
            Text(rowText)
            Spacer()
            Image(systemName: "heart.circle.fill")
        }
        // 撑满行容器的宽高
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        // 移除List默认的行内边距，让背景覆盖到行边缘
        .listRowInsets(EdgeInsets())
        .background(rowColor)
        .contextMenu {
            // 原有contextMenu代码不变
            VStack {
                Button {
                    rowColor = Color.red
                } label: {
                    MenuButton(colorOrb: "red_circle", buttonText: "High")
                }
                Button {
                    rowColor = .yellow
                } label: {
                    MenuButton(colorOrb: "yellow_circle", buttonText: "Medium")
                }
                Button {
                    rowColor = .green
                } label: {
                    MenuButton(colorOrb: "green_circle", buttonText: "Normal")
                }
            }
        }
    }
}

方案3（轻量hack）：强制行视图重绘 #

在原有代码基础上给行视图添加id修饰符，绑定颜色变量，颜色变化时会触发整行销毁重建，listRowBackground会更新：

// 原有行视图代码最后加这一行即可
.id(rowColor)

注意：该方案会导致行内其他临时状态（比如输入框内容、展开状态等）在颜色修改时丢失，仅适合行内无其他可变状态的场景。

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