含自定义Binding的泛型子视图无法重渲染/UI不更新问题排查

核心问题 #

你实现的WrappingHStack在处理带自定义Binding的子视图时，UI无法响应状态变化，本质原因在于：

1. 直接存储视图实例到rows数组中，这些缓存的视图不会随着外部Binding状态更新而重新生成；
2. 使用indices作为ForEach的标识，SwiftUI无法通过索引追踪状态变化，导致视图刷新失效；
3. 未监听外部数据/状态变化，WrappingHStack的body不会主动重新计算。

修复方案 #

重构WrappingHStack，让它基于数据模型而非直接基于视图数组工作，确保状态变化时视图能实时更新：

1. 重构WrappingHStack

struct WrappingHStack<Data: Identifiable, Content: View>: View {
    let data: [Data]
    let content: (Data) -> Content
    
    @State private var rows: [[Data]] = [[]]
    @State private var screenWidth: CGFloat = 0
    @State private var currentWidthOffset: CGFloat = 0
    
    var body: some View {
        VStack(alignment: .leading) {
            // 计算每个元素宽度的隐藏容器
            GeometryReader { proxy in
                ZStack {
                    ForEach(data) { item in
                        content(item)
                            .hidden()
                            .overlay(
                                GeometryReader { proxy2 in
                                    Color.clear
                                        .onAppear {
                                            determineRow(for: item, width: proxy2.size.width)
                                        }
                                }
                            )
                    }
                }
                .onAppear {
                    screenWidth = proxy.size.width
                    resetLayout()
                }
                .onChange(of: proxy.size.width) { newWidth in
                    screenWidth = newWidth
                    resetLayout()
                }
            }
            .frame(height: 0)
            
            // 渲染分行后的内容
            ForEach(rows) { row in
                HStack {
                    ForEach(row) { item in
                        content(item)
                    }
                }
            }
        }
        .onChange(of: data) { _ in
            resetLayout()
        }
    }
    
    // 重置布局状态，用于屏幕尺寸变化或数据更新时
    private func resetLayout() {
        rows = [[]]
        currentWidthOffset = 0
    }
    
    // 计算元素应该放入哪一行
    private func determineRow(for item: Data, width: Double) {
        guard screenWidth > 0 else { return }
        if width + currentWidthOffset < screenWidth {
            rows[rows.count - 1].append(item)
            currentWidthOffset += width
        } else {
            rows.append([item])
            currentWidthOffset = width
        }
    }
}

2. 更新测试代码

// 定义可识别的数据模型
struct ChipItem: Identifiable {
    let id: String
    let label: String
}

struct DummyItem: View {
    var label: String
    @Binding var selected: Bool
    
    var body: some View {
        Text(label)
            .foregroundColor(selected ? .blue : .red)
            .padding(.horizontal, 12)
            .padding(.vertical, 6)
            .background(selected ? Color.blue.opacity(0.1) : Color.red.opacity(0.1))
            .cornerRadius(16)
            .onTapGesture {
                selected.toggle()
            }
    }
}

struct DummyContentView: View {
    let chipItems: [ChipItem]
    @State var selected: [String: Bool] = [:]
    
    func binding(for id: String) -> Binding<Bool> {
        .init(
            get: { selected[id, default: false] },
            set: {
                print("setting to \($0)")
                selected[id] = $0
            }
        )
    }
    
    var body: some View {
        ZStack {
            WrappingHStack(data: chipItems) { item in
                DummyItem(label: item.label, selected: binding(for: item.id))
            }
        }
        .padding()
        .onAppear {
            chipItems.forEach { item in
                selected[item.id] = false
            }
        }
    }
}

#Preview {
    DummyContentView(chipItems: [
        ChipItem(id: "1", label: "Chip #1"),
        ChipItem(id: "2", label: "Chip #2"),
        ChipItem(id: "3", label: "Chip #3"),
        ChipItem(id: "4", label: "Chip #4"),
        ChipItem(id: "5", label: "Chip #5")
    ])
}

关键改动说明 #

1. 基于数据驱动视图：WrappingHStack不再直接接收视图数组，而是接收Identifiable数据模型和视图生成闭包，状态变化时会通过闭包重新生成最新绑定状态的视图；
2. 稳定的元素标识：使用Identifiable的id作为ForEach的标识，SwiftUI能准确追踪元素变化，确保视图正确刷新；
3. 布局重置机制：监听屏幕尺寸和数据变化，自动重置布局状态，保证布局计算始终基于最新状态；
4. 移除视图缓存：不再存储视图实例，而是存储数据，每次body计算时动态生成视图，彻底解决旧视图绑定失效的问题。

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