iOS SwiftUI：使用 ScrollView 和 ZStack 正确堆叠 NavigationView？

Posted 2023-03-05

【中文标题】iOS SwiftUI：使用 ScrollView 和 ZStack 正确堆叠 NavigationView？

【英文标题】：iOS SwiftUI: Correctly stack NavigationView with ScrollView and ZStack?

【发布时间】：2020-02-03 08:40:49

【问题描述】：

所以我一直在玩 SwiftUI，但我似乎无法正确地将 NavigationView 与 ScrollView 和 ZStack 堆叠在一起。

我正在尝试使用.black 背景来实现视图。代码如下：

MainView.swift

var body: some View 
    NavigationView 
        ChildView()
    

ChildView.swift

var body: some View 
    ZStack 
        Color.black.edgesIgnoringSafeArea(.all)
        ScrollView 
            ...
        
    
 

上面的代码给了我一个黑色的背景，但破坏了导航栏的行为。

外观：

应该是什么样子：

所以滚动时导航似乎没有从scrollEdgeAppearance 转到standardAppearance。

有什么想法吗？

【问题讨论】：

我回答你的问题了吗？如果是这样，请接受它作为解决方案。

【参考方案1】：

把ScrollView尽量往上放，否则头部动画不起作用。以下代码可以满足您的要求：

struct ChildView: View 
    var body: some View 
        ScrollView 
            VStack(spacing: 20) 
                ForEach(0..<40)  _ in
                    Text("Hello, World!")
                        .frame(maxWidth: .infinity)
                
            
            .background(Color.green.edgesIgnoringSafeArea(.all))
        
        .navigationBarTitle("Discover")
    


struct ContentView: View 
    var body: some View 
        NavigationView 
            ChildView()
        
    

要实现完全黑色的背景，即使您向上滚动底部，您也必须在UINavigationController 中摆弄。在那里，我还更改了导航栏的颜色以实现您的外观和感觉。请注意，这不会跟踪用户是否启用了暗模式。

extension UINavigationController 
    override open func viewDidLoad() 
        super.viewDidLoad()

        overrideUserInterfaceStyle = .dark

        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = UIColor.black
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        appearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
        
        navigationBar.standardAppearance = appearance
        navigationBar.compactAppearance = appearance
        navigationBar.scrollEdgeAppearance = appearance
    

【讨论】：

在您的示例中，ZStack 不是第一个孩子吗？

不，不完全是，当滚动到滚动视图的底部时，会看到背景仍然是白色的。所以看起来底层视图颜色是白色的，而覆盖视图是黑色的。我正在尝试实现完全黑色的背景。有什么想法吗？

查看编辑。我认为它可以满足您的需求。这是一个非常有趣的问题。

酷，你在哪里添加扩展？我的意思是在什么文件中以保持代码干净

习惯上把它放在一个单独的文件中，用一个特殊的名字，这个问题描述得很好：***.com/q/26319660