ScrollView + NavigationView 动画故障 SwiftUI

Question

我有一个简单的看法：

var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ForEach(0..<2) { _ in
                        CardVew(for: cardData)
                    }
                }
            }
            .navigationBarTitle("Testing", displayMode: .automatic)
        }
    }

但是您可以用任何东西替换 CardView - 故障仍然存在。故障视频

有办法解决吗？

Xcode 12.0.1，斯威夫特 5

Answer 1

将 top padding 设置为 1 至少会破坏两件大事：

1. 滚动视图不会在 NavigationView 和 TabView 下扩展 - 这使它失去了滚动条下内容的美丽模糊效果。
2. 在滚动视图上设置背景将导致大标题导航视图停止折叠。

当我不得不在我正在处理的应用程序的所有屏幕上更改背景颜色时，我遇到了这些问题。所以我做了更多的挖掘和试验，并设法找到了一个很好的解决问题的方法。

这是原始解决方案：

我们将 ScrollView 包装成 2 个几何读取器。

最上面的一个是尊重安全区域 - 我们需要这个来读取安全区域的插图 第二个是全屏显示。

我们将滚动视图放入第二个几何阅读器 - 使其大小为全屏。

然后我们使用 VStack 添加内容，通过应用安全区域填充。

最后 - 我们的滚动视图不会闪烁并接受背景而不会破坏导航栏的大标题。

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { geometryWithSafeArea in
                GeometryReader { geometry in
                    ScrollView {
                        VStack {

                            Color.red.frame(width: 100, height: 100, alignment: .center)

                            ForEach(0..<5) { i in

                                Text("\(i)")
                                    .frame(maxWidth: .infinity)
                                    .background(Color.green)

                                Spacer()
                            }

                            Color.red.frame(width: 100, height: 100, alignment: .center)
                        }
                        .padding(.top, geometryWithSafeArea.safeAreaInsets.top)
                        .padding(.bottom, geometryWithSafeArea.safeAreaInsets.bottom)
                        .padding(.leading, geometryWithSafeArea.safeAreaInsets.leading)
                        .padding(.trailing, geometryWithSafeArea.safeAreaInsets.trailing)
                    }
                    .background(Color.yellow)
                }
                .edgesIgnoringSafeArea(.all)
            }
            .navigationBarTitle(Text("Example"))
        }
    }
}

优雅的解决方案

由于解决方案现在已经很清楚了 - 让我们创建一个优雅的解决方案，只需替换填充修复即可重用并应用于任何现有的 ScrollView。

我们创建了一个 ScrollView 的扩展来声明fixFlickering函数。

逻辑基本上是我们将接收器包装到几何读取器中，并将其内容包装到带有安全区域填充的 VStack 中 - 就是这样。

使用了 ScrollView，因为编译器错误地推断嵌套滚动视图的内容应该与接收者相同。显式声明 AnyView 将使其接受包装的内容。

有2个重载：

• 第一个不接受任何参数，您可以在任何现有的滚动视图上调用它，例如。你可以代替.padding(.top, 1)用.fixFlickering()-这就是它。
• 第二个接受配置器闭包，用于让您有机会设置嵌套滚动视图。这是必需的，因为我们不使用接收器，只是将它包装起来，但是我们创建了一个新的 ScrollView 实例并且只使用接收器的配置和内容。在这个闭包中，您可以以任何您喜欢的方式修改提供的 ScrollView，例如。设置背景颜色。

extension ScrollView {
    
    public func fixFlickering() -> some View {
        
        return self.fixFlickering { (scrollView) in
            
            return scrollView
        }
    }
    
    public func fixFlickering<T: View>(@ViewBuilder configurator: @escaping (ScrollView<AnyView>) -> T) -> some View {
        
        GeometryReader { geometryWithSafeArea in
            GeometryReader { geometry in
                configurator(
                ScrollView<AnyView>(self.axes, showsIndicators: self.showsIndicators) {
                    AnyView(
                    VStack {
                        self.content
                    }
                    .padding(.top, geometryWithSafeArea.safeAreaInsets.top)
                    .padding(.bottom, geometryWithSafeArea.safeAreaInsets.bottom)
                    .padding(.leading, geometryWithSafeArea.safeAreaInsets.leading)
                    .padding(.trailing, geometryWithSafeArea.safeAreaInsets.trailing)
                    )
                }
                )
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

示例 1

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    Color.red.frame(width: 100, height: 100, alignment: .center)

                    ForEach(0..<5) { i in

                        Text("\(i)")
                            .frame(maxWidth: .infinity)
                            .background(Color.green)
                        
                        Spacer()
                    }

                    Color.red.frame(width: 100, height: 100, alignment: .center)
                }
            }
            .fixFlickering { scrollView in
                
                scrollView
                    .background(Color.yellow)
            }
            .navigationBarTitle(Text("Example"))
        }
    }
}

示例 2

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    Color.red.frame(width: 100, height: 100, alignment: .center)

                    ForEach(0..<5) { i in

                        Text("\(i)")
                            .frame(maxWidth: .infinity)
                            .background(Color.green)
                        
                        Spacer()
                    }

                    Color.red.frame(width: 100, height: 100, alignment: .center)
                }
            }
            .fixFlickering()
            .navigationBarTitle(Text("Example"))
        }
    }
}

Answer 2

这是一个解决方法。添加.padding(.top, 1)到ScrollView：

struct ContentView: View {
            
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    ForEach(0..<2) { _ in
                        Color.blue.frame(width: 350, height: 200)
                    }
                }
            }
            .padding(.top, 1)
            .navigationBarTitle("Testing", displayMode: .automatic)
        }
            
    }
}

Answer 3

我简化了@KoCMoHaBTa 的回答。这里是：

extension ScrollView {
    private typealias PaddedContent = ModifiedContent<Content, _PaddingLayout>
    
    func fixFlickering() -> some View {
        GeometryReader { geo in
            ScrollView<PaddedContent>(axes, showsIndicators: showsIndicators) {
                content.padding(geo.safeAreaInsets) as! PaddedContent
            }
            .edgesIgnoringSafeArea(.all)
        }
    }
}

像这样使用：

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                /* ... */
            }
            .fixFlickering()
        }
    }
}