SwiftUI 列表行背景未渲染到屏幕外答案

【问题标题】：SwiftUI List Row Background not Rendering Off ScreenSwiftUI 列表行背景未渲染到屏幕外
【发布时间】：2022-07-07 03:23:50
【问题描述】：

我遇到了一个奇怪的图形问题，即从屏幕开始的行在出现在屏幕上时没有正确的背景颜色，但随后强制重新渲染以某种方式解决了问题。

不确定是否有办法强制所有元素正确渲染，但据我所知，我正确使用了修饰符。

非常感谢任何帮助！

列表视图

        List(sessionState.listItems) { groupitem in
            Section {
                ForEach(groupitem.items) { item in
                    ListRow(name: item.name, quantity: item.quantity)
                        .listRowSeparator(.hidden)
                        .listRowBackground(ListRowBackground(type: item.type))
                        .swipeActions(edge: .leading, allowsFullSwipe: true) {
                            ListRowButtonView(image: ButtonImage.trash.rawValue) {
                                withAnimation(.default) {
                                    onDeleteItem(item)
                                }
                            }
                        }
                        .swipeActions(edge: .trailing, allowsFullSwipe: true) {
                            ListRowButtonView(image: ButtonImage.fridge.rawValue, tint: Color.asset.gradientDark) {
                                withAnimation(.default) {
                                    handleOnMove(item)
                                }
                            }
                        }
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            ListRowButtonView(tint: .green, systemImage: ButtonImage.plus.rawValue, label: "Increment") {
                                withAnimation(.default) {
                                    onUpdateQuantity(item, type: FBKeys.Increment.rawValue)
                                }
                            }
                        }
                        .swipeActions(edge: .trailing, allowsFullSwipe: false) {
                            decrementButton(for: item)
                        }
                }
            } header: {
                Text(LocalizedStringKey(groupitem.title))
                    .font(.custom("Roboto-Medium", size: 14, relativeTo: .body))
                    .foregroundColor(Color.asset.gradientPink)
            }
        }
        .listStyle(.grouped)
        .onAppear {
            UITableView.appearance().showsVerticalScrollIndicator = false;
        }

列表行背景视图

struct ListRowBackground: View {
    let type: String
    
    var body: some View {
        Rectangle()
            .overlay(
                Rectangle()
                    .fill(Color.asset.bg)
                    .padding([.trailing], 6)
            )
            .foregroundColor(Helpers.shared.getCategoryColor(for: type))
    }
}

正如您在屏幕截图中看到的那样，当我将“列表”选项卡中的另一行添加到“冰箱”选项卡的列表中时，之后当我转到冰箱选项卡时，我看到了行的背景缺失。一旦我导航到任何其他屏幕，然后返回到“FRIDGE”选项卡，我就会看到所有行背景都正确呈现。

【问题讨论】：

这需要Minimal Reproducible Example (MRE)。
如果你用静态颜色替换.foregroundColor(Helpers.shared.getCategoryColor(for: type))也会发生这种情况吗？
@ChrisR 不，它也不起作用。从上面的屏幕截图看起来只有一行受到影响，但对其进行测试（也使用静态颜色）我可以看到整个列表都受到影响（多行或所有行都失去了背景），当我说背景时，我的意思是整个行背景不只有颜色。我会在接下来的几天尝试添加一个 MRE

标签： swift swiftui swiftui-list

【解决方案1】：

这对我有用，但它很愚蠢/疯狂。我将 onAppear 用于行视图，以在它在屏幕上可见时触发它进行自我更新。在 onAppear 中，我更新了一个毫无意义的 Bool 并确保视图代码正在使用它，因此它会触发视图重新加载/更新。

struct RowView : View{
    var highlighted : Bool
    @State var pointlessViewUpdatingBool = true 
    
    var body: some View {
        let backColor = (pointlessViewUpdatingBool || !pointlessViewUpdatingBool) && highlighted ? Color.blue : Color( UIColor.systemGroupedBackground )
        
        HStack{
            Text("Cell stuff goes here")
        }
        .onAppear{
            pointlessViewUpdatingBool.toggle()
        }
        .listRowBackground( backColor )
        .contentShape(Rectangle()) //makes whole row tappable
    }
}

【讨论】：