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

rggaifut 于 2023-10-15 发布在 Swift

关注(0)|答案(6)|浏览(151)

我无法在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())

结果

如何在NavigationView封装的ScrollView下设置背景色？
//编辑：
下面的动画呈现了一个理想的效果（它是用UIKit制作的）。

swift

来源：https://stackoverflow.com/questions/58519018/how-to-set-scrollviews-background-color-in-navigationview-in-swiftui

6条答案

按热度按时间

ffx8fchx1#

在用尽所有可能性后，我降落在下面的解决方案中，它非常适合你想要实现的目标。

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")
        }  
    }
}

希望这有帮助;）

赞(0）回复(0）举报 2023-10-15

6za6bjd02#

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

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

赞(0）回复(0）举报 2023-10-15

rmbxnbpk3#

这是一个Hacky SwiftUI解决方案：

iOS 13和iOS 14*

NavigationView {
    ScrollView {
        VStack {
            // ...
        }
        .background(Color.red.frame(height: 99999999))
    }
}

赞(0）回复(0）举报 2023-10-15

ygya80vv4#

我也有同样的问题。在.background()修改器之后，我添加了.padding(.top)，它就像它应该的那样工作了。

赞(0）回复(0）举报 2023-10-15

f1tvaqid5#

你可以这样做：

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我试过忽略顶部的安全边缘，但它会导致导航栏间距的问题

赞(0）回复(0）举报 2023-10-15

nukf8bse6#

这是可行的（参见details）：

ScrollView(showsIndicators: false) {
    VStack {
        ForEach(0...70, id: \.self) { _ in
            Text("Text text")
        }
    }
    .frame(width: UIScreen.main.bounds.width)
}
.background(.pink)
.scrollContentBackground(.hidden)

赞(0）回复(0）举报 2023-10-15

我来回答

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

1

2

3

6条答案

相关问题

热门标签

最新问答