屏幕背景颜色与滚动视图和导航栏 SwiftUI

Question

我在使用 SwiftUI 的滚动视图时尝试使用彩色背景，但这会导致导航标题不再折叠。我已经尝试了很多方法，但这始终是一个问题。

struct Person : Identifiable{
var id : Int
var name : String
}
struct ContentView: View {
let people = [
Person(id: 1, name: "Ricky"),
Person(id: 2, name: "Dani"),
Person(id: 3, name: "Mark"),
Person(id: 4, name: "Kailin"),
Person(id: 5, name: "James"),
Person(id: 5, name: "Jenna")
]
var body: some View {
NavigationView{
ZStack{
Color.red
.edgesIgnoringSafeArea(.all)
ScrollView{
ForEach(people, id: .id) { person in
Text(person.name)
.frame(width: 300, height: 400)
.background(Color.blue)
.padding()
}
}.navigationBarTitle("Home")
}
}
}
//    init(){
//        UIView.appearance().backgroundColor = .orange
//    }
}

Answer 1

像这样重新排列视图：

var body: some View {
NavigationView {

ScrollView {
ZStack {
Color.red
VStack {
ForEach(people, id: .id) { person in
Text(person.name)
.frame(width: 300, height: 400)
.background(Color.blue)
.padding()
}
}
}
}.navigationBarTitle("Home")
}

<小时 />

来自 iOS 16

您可以使用以下修饰符以本机方式更改导航栏的颜色：

.toolbarBackground(.yellow, in: .navigationBar)

_{这仅适用于内联导航栏(带有无缝动画(}

iOS 15及更低版本

您可以将UINavigationBar.appearance().backgroundColor = .red与另一个UIColor(如背景Color(UIColor.red)(一起使用，以模拟透明的大NavigationBar，直到用于更改 SwiftUI 中正确颜色的直接 API 到达。

---

注 1：UIColor.red与Color.red略有不同。

注2：如果要使用List而不是ScrollView，则应在ZStack中添加.listRowInsets(EdgeInsets())以删除多余的空格。

Answer 2

这是我想出的解决方案...此解决方案还允许您将背景单元格着色为与列表元素不同的颜色。你可以用ScrollView做一个非常相似的事情

如其他解决方案的注释中所述，使用 ListView 执行该解决方案会从单元格中留下一堆空格。(这就是为什么这很有用(

我想我会补充这一点，因为其他解决方案都不适合我。

struct ListBackgroundColor: ViewModifier {
let color: UIColor
func body(content: Content) -> some View {
content
.onAppear() {
UITableView.appearance().backgroundColor = self.color
//(Optional) Edit colour of cell background
UITableViewCell.appearance().backgroundColor = self.color
}
}
}   
extension View {
func listBackgroundColor(color: UIColor) -> some View {
ModifiedContent(content: self, modifier: ListBackgroundColor(color: color))
}
}

用户界面示例 https://i.stack.imgur.com/G5PXt.jpg