在 SwiftUI 中放置在导航堆栈中时滚动视图的背景颜色

Posted 2023-02-24

【中文标题】在 SwiftUI 中放置在导航堆栈中时滚动视图的背景颜色

【英文标题】：Scroll Views background colour when placed in a Navigation Stack in SwiftUI

【发布时间】：2020-07-05 16:59:37

【问题描述】：

我在NavigationView 中有两个滚动视图。我希望两个 ScrollView 都继承 onAppear 修饰符中提到的颜色。

但是，当我导航到第二个 ScrollView 并返回到第一个 ScrollView 时，第一个视图会继承第二个 ScrollView 颜色。

struct ScrollView1: View 
    var body: some View 
        NavigationView 
            ScrollView 
                NavigationLink(destination: ScrollView2()) 
                    Text("First View").padding()
                .frame(maxWidth: .infinity)
            .navigationBarTitle("First")
            .onAppear 
                UIScrollView.appearance().backgroundColor = UIColor.green
            
        
    


struct ScrollView2: View 
    var body: some View 
        ScrollView 
            Text("Second View").frame(maxWidth: .infinity)
        
        .onAppear 
            UIScrollView.appearance().backgroundColor = UIColor.gray
        
    

有谁知道我的第一个 ScrollView 将如何始终继承绿色和第二个灰色？

通过包裹在 ZStack 中添加 ScrollView 颜色不会在滚动时将 NavigationBar 从大折叠到内联。

是否有任何其他解决方案可以同时实现这两者，即保留 navigationBar 反弹行为以及 ScrollView 颜色。

【参考方案1】：

首先您可以从UITableView 和UIScrollView 中删除backgroundColor（您可以在SceneDelegate 中执行此操作，因此只会执行一次）：

UITableView.appearance().backgroundColor = UIColor.clear
UIScrollView.appearance().backgroundColor = UIColor.clear

然后使用ZStack添加背景颜色：

struct ScrollView1: View 
    var body: some View 
        NavigationView 
            ZStack 
                Color.green
                ScrollView 
                    NavigationLink(destination: ScrollView2()) 
                        Text("First View").padding()
                    .frame(maxWidth: .infinity)
                .navigationBarTitle("asdasd")
            
        
    

struct ScrollView2: View 
    var body: some View 
        ZStack 
            Color.gray
            ScrollView 
                Text("Second View").frame(maxWidth: .infinity)
            
        
    

【讨论】：

在 ZStack 中包装滚动视图并添加颜色，破坏了 navigationBarTitle 反弹行为。这就是我尝试在 onAppear 修饰符中添加滚动视图颜色的原因。如果两者都可以同时实现，请帮助我。 :)

您可以为您的NavigationView 执行相同的操作。只需使用UITableView 删除背景颜色即可。我用这个修复更新了我的代码。

这仍然不会在滚动时将导航栏从大折叠到内联。颜色变化按预期工作。

pawello 是正确的，如果您想处理导航栏，请使用 NavigationBarTitle("title", displayMode: automatic)

@BeeEm97 您的问题目前似乎没有解决方案：How change background color if using NavigationView in SwiftUI?, Screen Background Color With ScrollView And Navigation Bar SwiftUI。