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

Posted 2023-02-24

【中文标题】带有列表视图的导航视图的背景颜色

【英文标题】：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 之间有几个视图。列表本身似乎是一个表格视图，每个单元格都有自己的背景。

【参考方案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.