1

在 Scrollview 内部，我使用带有固定标题的 LazyVStack，并根据滚动位置操纵该标题的比例。

在 LazyVStack 中，我有一个 ForEach 迭代一些项目列表。但是，如果我使用嵌套的 ForEach 循环（例如，按月份将项目分组在一起），则滚动视图会变得非常故障/跳跃。

最小可重现代码：

struct Nested: View {
    @State var yValueAtMinScale: Double = 100 // y value at which header is at minimum scale (used for linear interpolation)
    @State var headerScale = 1.0
    var restingScrollYValue = 240.0 // y value of scroll notifier when scrollview is at top
    
    var body: some View {
        ZStack {
            ScrollView {
                LazyVStack(pinnedViews: [.sectionHeaders]) {
                    Section(
                        header:
                            Circle()
                                .fill(Color.red)
                                .frame(width: 150, height: 150)
                                .scaleEffect(CGFloat(headerScale), anchor: .top)
                                .zIndex(-1)
                    ) {
                        
                        // scroll position notifier
                        // i set the header's scale based on this view's global y-coordinate
                        GeometryReader { geo -> AnyView in
                            let frame = geo.frame(in: .global)
                            print("miny", frame.minY)
                            DispatchQueue.main.async {
                                self.headerScale = calculateHeaderScale(frameY: frame.minY)
                            }
                            return AnyView(Rectangle()) // hack
                        }
                        .frame(height: 0) // zero height hack
                        
                        
                        ForEach(1...10, id: \.self) { j in
                            Section {
                                Text("\(j)")
                                // works without nested loop
                                ForEach(1...3, id: \.self) { i in
                                    Rectangle()
                                        .frame(height: 50)
                                        .padding(.horizontal)
                                        .id(UUID())
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    // interpolates some linear value bounded between 0.75 and 1.5x, based on the scroll value
    func calculateHeaderScale(frameY: CGFloat) -> Double {
        let minScale = 0.75
        let linearValue = (1-minScale) * (Double(frameY) - yValueAtMinScale) / (restingScrollYValue - yValueAtMinScale) + minScale
        return max( 0.75, min(1.5, linearValue) )
    }
}

删除内部嵌套的 ForEach 循环可以解决问题。这里会发生什么？我认为在每次滚动更新时更新标题比例会导致视图更新过多并导致故障，但这并不能解释为什么它适用于一个 ForEach 循环。

4

0 回答 0