带有列表视图的导航视图的背景颜色答案

【问题标题】：Background Color of Navigation View with List View带有列表视图的导航视图的背景颜色
【发布时间】：2019-09-18 07:30:20
【问题描述】：

现在我们在 Xcode 的 GM 上，我仍然没有得到一些基本的背景颜色。下面只是一个测试应用程序。目标是使整个背景为绿色，而“单元格”为红色。当您单击一个单元格时，它会转到一个示例详细信息，整个背景为绿色（这在示例代码中有效）。

有没有办法让带有导航视图和列表的 ContentView 上的背景变成绿色，就像在“DetailView”上一样？

struct ContentView: View {  
    var body: some View {  
        NavigationView {  
            List {  
                ForEach(1...3, id: \.self) { index in  
                    NavigationLink( destination: DetailView()) {  
                        ContentCell()  
                    }  
                    .frame(height: 100)  
                }  
            }  
            .navigationBarTitle("My List")  
        }
        .background(Color.green)// Not working  
    }
}

struct ContentCell: View {  
    var body: some View {  
        GeometryReader { geometry in  
            VStack {  
                Text("An item to display.")  
            }  
            .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center)  
            .background(Color.red)// Working  
        }  
    }  
}

struct DetailView: View {  
    var body: some View {  
        VStack {  
            Text ("At the detail view")  
        }  
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)  
        .background(Color.green)// Working  
        .edgesIgnoringSafeArea(.all)  
    }  
}

【问题讨论】：

您可以将 ZStack 与 Color.green 和 NavigationView 一起使用。
是的，但是有一个列表，它仍然是白色的。如果你然后摆脱列表它是绿色的。使用 NavigationView（应用程序需要）和 List（应用程序需要），我找不到任何组合可以让您使用 List（编辑按钮）的实用性，而不是白色背景。
Xcode 中最简洁的功能之一是 Debug->View Debugging->Capture View Hierarchy。您正在设置背景，但在它和覆盖背景的 ContentCell 之间有几个视图。列表本身似乎是一个表格视图，每个单元格都有自己的背景。

标签： swiftui

【解决方案1】：

我不会说它已解决，但我更接近一步，也许有人可以修复它的最后一部分。在测试应用程序的最后一个版本中，我添加了一个带有绿色填充矩形的 ZStack。我还将 .colorMultiply 添加到列表中（您还必须添加填充）。整个背景现在是绿色的，就像它应该的那样。现在的问题是“细胞”的“红色”不再看起来是红色的。我认为正在发生的事情是它也将 colorMulitply 添加到单元格中。我们可以免除 colorMultiply 到单元格吗？

struct ContentView: View {

    var body: some View {
        NavigationView {
            ZStack {
                Rectangle()
                    .fill(Color.green)
                    .edgesIgnoringSafeArea(.all)
                List {
                    ForEach(1...3, id: \.self) { index in
                        NavigationLink( destination: DetailView()) {
                            ContentCell()
                        }
                        .frame(height: 100)
                    }
                }
                .navigationBarTitle("My List")
                .colorMultiply(Color.green).padding(.top)
            }
        }
    }
}

【讨论】：

【解决方案2】：

感谢 Paul Hudson (hackingwithswift.com)，我今天终于得到了答案。在 init 中，更改 tableview 颜色需要一个 UIColor。 .listRowBackground 使用 SwiftUI 颜色。如果你用 rgb 设置每一个，它们将匹配。如果您只使用 .green，它们会有所不同。

struct ContentView: View {

    init() {
        UITableView.appearance().backgroundColor = .green // Uses UIColor
    }

    var body: some View {
        NavigationView {
            List {
                ForEach(1...3, id: \.self) { index in
                    NavigationLink( destination: DetailView()) {
                        ContentCell()
                    }
                    .frame(height: 100)
                    .listRowBackground(Color.blue) // Uses Color
                }
            }
            .navigationBarTitle("My List")

        }
        //.background(Color.green)// Not working and not needed
    }
}

struct ContentCell: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                Text("An item to display.")
            }
            .frame(width: (geometry.size.width), height: geometry.size.height, alignment: .center)
            .background(Color.red)// Working
        }
    }
}

struct DetailView: View {
    var body: some View {
        VStack {
            Text ("At the detail view")
        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
        .background(Color.green)// Working
        .edgesIgnoringSafeArea(.all)
    }
}

【讨论】：

UIColor.systemGreen = Color.green.