我无法在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制作的)。
6条答案
按热度按时间ffx8fchx1#
在用尽所有可能性后,我降落在下面的解决方案中,它非常适合你想要实现的目标。
希望这有帮助;)
6za6bjd02#
您可以使用下面的代码实现几乎相同的行为,该代码使用列表视图。
代码生成这些视图:12
rmbxnbpk3#
这是一个Hacky SwiftUI解决方案:
ygya80vv4#
我也有同样的问题。在
.background()
修改器之后,我添加了.padding(.top)
,它就像它应该的那样工作了。f1tvaqid5#
你可以这样做:
它将产生一个看起来像这样的视图:
我知道这不是完整的解决方案,因为顶部的安全边缘,但希望它能帮助你更接近。
PS我试过忽略顶部的安全边缘,但它会导致导航栏间距的问题
nukf8bse6#
这是可行的(参见details):