导航查看背景颜色

时间:2020-02-10 12:29:06

标签: swift xcode uinavigationcontroller swiftui swiftui-list

我正在尝试在我的SwiftUi列表上设置背景颜色,就像我在这里发布的帖子:SwiftUI Background List color

我找到了将以下代码作为init()插入的解决方案

   init() {
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear
    }

我现在的问题是...一旦我在后台插入导航链接 颜色再次变成白色。

如何将NavigationView的颜色设置为.clear?我试图.foregroundColor(.clear) 但请注意...

我想要的是一个没有白色背景的导航链接。.Image with correct effect

但实际上它是这样的:

Image wrong effect with NavigationLink active

struct ContentView: View {

    var dm : DataManager

    init(dmi: DataManager) {
        self.dm = dmi
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear

    }
    var body: some View {

        ZStack{
            RadialGradient(gradient: Gradient(colors: [.orange, .red]), center: .center, startRadius: 100, endRadius: 470).edgesIgnoringSafeArea(.all)
                .overlay(
                    // NavigationView{
                    List{
                        ForEach(dm.vector, id: \.self) {  item in
                            Text(String(item))
                        }

                    }
                    //                    }
            )
        }

    }
}

2 个答案:

答案 0 :(得分:1)

很容易。我不建议这样做,您最好遵循apple ui设计建议

struct ContentView: View {

    init() {
        UITableView.appearance().backgroundColor = UIColor.clear
        UITableViewCell.appearance().backgroundColor = .clear

    }
    var body: some View {
        NavigationView {
            RadialGradient(gradient: Gradient(colors: [.orange, .red]), center: .center, startRadius: 100, endRadius: 470).edgesIgnoringSafeArea(.all)
                .overlay(
                    List{
                        Text("Alfa")
                        NavigationLink(destination: Text("LINKED")) {
                            Text("Label")
                        }

                    }.navigationBarTitle("Table")
            )
        }
    }
}

enter image description here

答案 1 :(得分:0)

在视图调试器中看来,NavigationView创建的视图层次结构包括一个白色背景的视图,该视图覆盖了整个屏幕,并且无法修改。

但是,我能够通过在导航堆栈内的各个视图上设置整个屏幕的背景来解决此问题,该背景覆盖了由导航视图haha创建的叠加层。

下面是一个使用红色背景的示例:

struct ContentView: View {
  var body: some View {
    NavigationView {
      ZStack {
        Color.red.edgesIgnoringSafeArea(.all)
        ListView {          
          Text("Hello, world!")
        }
      }
    }
  }
}