带有 ScrollView 和导航栏 SwiftUI 的屏幕背景颜色答案

【问题标题】：Screen Background Color With ScrollView And Navigation Bar SwiftUI带有 ScrollView 和导航栏 SwiftUI 的屏幕背景颜色
【发布时间】：2020-01-10 03:12:33
【问题描述】：

我在使用带有 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
    //    }
}

【问题讨论】：

标签： ios swift colors swiftui

【解决方案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")
    }

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

注意UIColor.red 与Color.red 略有不同。

另外注意如果您想使用List 而不是ScrollView，您应该将.listRowInsets(EdgeInsets()) 添加到ZStack 以消除额外的空白。

【讨论】：

非常感谢！唯一的缺点是，如果将滚动视图更改为列表，列表会添加填充以创建空白。
然后将.listRowInsets(EdgeInsets())添加到ZStack。
使用此代码后，状态栏仍然是白色的，对吗？
正确，我们这里根本不碰状态栏颜色
也忽略边缘在这里不起作用。所以滚动视图的顶部和底部仍然是白色的。这并不能解决问题。不知道为什么在 swiftUI 中制作背景颜色如此困难

【解决方案2】：

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

正如 cmets 中提到的另一个解决方案，使用 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://imgur.com/a/TQ9c5Sc

【讨论】：