列表视图的导航视图的背景色

时间:2019-09-18 07:30:20

标签: swiftui

现在我们是Xcode的总经理,我仍然没有获得一些基本的背景色。下面只是一个测试应用程序。目的是使整个背景变成绿色,使“单元格”变成红色。当您单击一个单元格时,它会转到一个示例详细信息以及整个背景绿色(这在示例代码中有效)。

是否有一种方法可以使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)  
    }  
}  

2 个答案:

答案 0 :(得分:0)

我不会说它已解决,但是我离它更近了,也许有人可以修复它的最后一部分。在测试应用程序的最新版本中,我添加了一个带有绿色填充矩形的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)
            }
        }
    }
}

答案 1 :(得分:0)

感谢Paul Hudson(hackingwithswift.com),今天我终于得到了答案。在初始化中,更改表视图颜色将使用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)
    }
}