Question

我无法在SwiftUI的ScrollView下设置背景色。当我使用.background(Color.red)时，背景被切断，因此它不会进入导航栏，并且滚动似乎已中断。我尝试了几种解决方案，但每个解决方案均无效。我有一个简单的视图层次结构

NavigationView {
    ScrollView([.vertical], showsIndicators: true) {
        VStack {
            ForEach(0...50, id: \.self) { _ in
                Text("Text text")
            }
        }
    }
    .navigationBarTitle("Title", displayMode: .large)
}
.navigationViewStyle(StackNavigationViewStyle())

它按预期工作

现在，我想添加背景色，我尝试了以下解决方案

1

NavigationView {
    ScrollView([.vertical], showsIndicators: true) {
        VStack {
            ForEach(0...50, id: \.self) { _ in
                Text("Text text")
            }
        }
    }
    .background(Color.red)
    .navigationBarTitle("Title", displayMode: .large)
}
.navigationViewStyle(StackNavigationViewStyle())

结果

2

NavigationView {
    ZStack {
        Color.red
        ScrollView([.vertical], showsIndicators: true) {
            VStack {
                ForEach(0...50, id: \.self) { _ in
                    Text("Text text")
                }
            }
        }
        .navigationBarTitle("Title", displayMode: .large)
    }
}
.navigationViewStyle(StackNavigationViewStyle())

结果

3

NavigationView {
    ZStack {
        Color.red.edgesIgnoringSafeArea([.all])
        ScrollView([.vertical], showsIndicators: true) {
            VStack {
                ForEach(0...50, id: \.self) { _ in
                    Text("Text text")
                }
            }
        }
        .navigationBarTitle("Title", displayMode: .large)
    }
}
.navigationViewStyle(StackNavigationViewStyle())

结果

如何在ScrollView中的NavigationView下设置背景色？

//编辑：

下面的动画呈现出理想的效果（由UIKit制作）。

Answer 1

在竭尽所能之后，我找到了以下解决方案，该解决方案非常适合您想要实现的目标。

struct DemoView: View {
    
    init(){
        let navigationBarAppearance = UINavigationBarAppearance()
        navigationBarAppearance.backgroundColor = UIColor.red
        UIScrollView.appearance().backgroundColor = UIColor.red
    }
    
    var body: some View {

        NavigationView{
                ScrollView{
                    VStack{   
                        ForEach(0..<30, id: \.self){ _ in
                                Text("Text Text").foregroundColor(Color.black)
                        }
                    }.frame(maxWidth: .infinity)
                     .background(Color(UIColor.red))
            
            }.navigationBarTitle("Title")
        }  
    }
}

希望这会有所帮助；）

Answer 2

使用下面的使用列表视图的代码，您可以实现几乎相同的行为。

struct DemoView: View {
    init(){
        let navigationBarAppearance = UINavigationBarAppearance()
        navigationBarAppearance.backgroundColor = UIColor.red
        UITableView.appearance().separatorStyle = .none
        UITableView.appearance().backgroundColor = UIColor.red
    }
    
    var body: some View {

        NavigationView{
 
                List{

                    ForEach(0..<30, id: \.self){ _ in
                        
                        Text("Text Text")
                        
                    }.listRowBackground(Color(UIColor.red))
            }
            }.navigationBarTitle("Title")
        }
        
    }
}

代码产生以下视图：1 2

Answer 3

尝试下面的代码，它应该可以按预期工作，

快照

struct ContentView: View {

   init() {
       //Use this if NavigationBarTitle is with Large Font
       UINavigationBar.appearance().backgroundColor = .red
   }
    var body: some View {
        NavigationView {

        ScrollView([.vertical], showsIndicators: true) {
            VStack {
                ForEach(0...50, id: \.self) { _ in
                    HStack {
                        Spacer()
                         Text("Text text")
                        Spacer()
                    }
                }
            }
            .background(Color.red)
        }
        .navigationBarTitle(Text("Title") , displayMode: .large)
        .edgesIgnoringSafeArea(.top)
    }.navigationViewStyle(StackNavigationViewStyle())
  }
}

希望这会有所帮助！

输出：

Answer 4

您可以这样：

struct ContentView: View {
    init() {
        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().backgroundColor = .red
    }
    var body: some View {
        NavigationView {
            ScrollView([.vertical], showsIndicators: true) {
                VStack {
                    ForEach(0...70, id: \.self) { _ in
                        Text("Text text")
                    }
                }.frame(minWidth: 0, maxWidth: .infinity)
                    .background(Color(UIColor.red))
            }
            .navigationBarTitle("Title", displayMode: .large)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

它将产生如下所示的视图：

我知道这不是完整的解决方案，因为它具有最高的安全性，但希望它可以帮助您更进一步。

PS Ive尝试忽略顶部安全边缘，但这会导致导航栏间距问题

如何在SwiftUI的NavigationView中设置ScrollView的背景颜色

1

2

3

4 个答案: