如何在SwiftUI中设置导航视图背景颜色

Question

我正在尝试设置导航视图的背景色。我正在尝试使用以下代码添加 ZStack（部分来自 SwiftUI 教程）。然而，它只会是白色的，除非我用间隔（）替换导航视图...

    var body: some View {
    ZStack
        {
            NavigationView {
                List {
                    Toggle(isOn: $userData.showFavoritesOnly) {
                        Text("Favourites")
                    }
                    ForEach(userData.landmarks) { landmark in
                        if !self.userData.showFavoritesOnly || landmark.isFavorite {
                            NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                                LandmarkRow(landmark: landmark)
                            }
                        }
                    }
                }

                .navigationBarTitle(Text("Landmarks"), displayMode: .large)
            }

    }.background(Color.blue.edgesIgnoringSafeArea(.all))
}

我可以设置单个列表项的颜色，但我希望整个背景显示蓝色

Answer 1

这是我提出的解决方案……这个解决方案还允许您将背景单元格的颜色与列表元素的颜色不同。

因为ZStack不起作用，UIView/UINavigationBar.appearance（）. background Color会改变整个可见屏幕的颜色。

我想我会补充一点，因为其他解决方案都不适合我。

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))
    }

}

Answer 2

这似乎是使导航视图透明的关键：UITableView.appearance（）。backgroundColor=清除

感谢：https://izziswift.com/swiftui-list-color-background/这段代码。

以下是我整理的代码，并用Xcode 13 Beta针对iOS 15 Beta进行了测试:截图...还测试了Xcode 13 Beta部署到iPhone 12 iOS 14.7。

它可以与Xcode 12.x和iOS 14.x一起工作(参见关于SwiftUI 3功能的评论，您可能会删除，等等。)

//  NavigationView.swift
//  swiftui.proto2
//
//  Created by Sunil Raman on 12/8/21
//  Updated by Sunil Raman on 18/8/21

import SwiftUI

//Testing gradient backgrounds, etc. (may require Xcode 13)
//Credit: https://sarunw.com/posts/how-to-set-screen-background-color-in-swiftui/
let backgroundGradient = LinearGradient(
    colors: [Color.purple, Color.red],
    startPoint: .top, endPoint: .bottom)

//Build view here!
struct MyCoolListView: View {
    
    //The "magic" happens here
    //Credit: https://izziswift.com/swiftui-list-color-background/
    init() {
        //Appears to be the key to making Navigation View transparent
        UITableView.appearance().backgroundColor = .clear
        //Just for reference, not sure if opacity can be adjusted
        UINavigationBar.appearance().barTintColor = .white
    }
        
    //Our view, of course
    var body: some View {
      
        //Our navigation view
        NavigationView {
            
            //Our list
            List() {
            
                //Testing sections w.r.t. layout purposes, formatting section headers, etc.
                Section(header: Text("Section 1").font(.title2).foregroundColor(.yellow)) {
                    NavigationLink("Text 1", destination: MyCoolListView())
                    NavigationLink("Text 1", destination: MyCoolListView())
                    NavigationLink("Text 1", destination: MyCoolListView())
                }
                
                Section(header: Text("Section 2").font(.title3).fontWeight(.bold)) {
                    NavigationLink("Text 2", destination: MyCoolListView())
                    NavigationLink("Text 2", destination: MyCoolListView())
                    NavigationLink("Text 2", destination: MyCoolListView())
                }
                        
                Section(header: Text("Section 3").font(.title3).fontWeight(.light)) {
                    NavigationLink("Text 3", destination: MyCoolListView())
                    NavigationLink("Text 3", destination: MyCoolListView())
                    NavigationLink("Text 3", destination: MyCoolListView())
                }
                        
                //For reference, you can uncomment this to test
                //.listRowBackground(Color.blue)
                        
           }
           .listStyle(.insetGrouped)
           //This simulates a "material" type effect, hard to apply to Lists even in SwiftUI 3?
           .opacity(0.65)
           //New SwiftUI 3 feature, you can use if #available(iOS 15, *) or something
           //.refreshable {
               //Refresh action here
           //}
           //Can the navigation title be manipulated further? Not sure.
           .navigationTitle(Text("Title"))
           //The awesome background!
           .background(backgroundGradient)
           //This helps with iOS 14.7 
           .ignoresSafeArea()
                                
        } //End NavigationView
        
    } //End some View
    
} //End struct


//Enabling the previewing in Xcode
struct MyCoolListView_Previews: PreviewProvider {
    static var previews: some View {
        if #available(iOS 15.0, *) {
            MyCoolListView()
                .previewInterfaceOrientation(.landscapeLeft)
        } else {
            // Fallback on earlier versions
        }
    }
}

Answer 3

它与< code>UINavigationBar相同。但是由于还没有直接的api，您可以使用< code>appearance来更改它:

UINavigationBar.appearance().backgroundColor = .orange
UINavigationBar.appearance().tintColor = .green
UINavigationBar.appearance().barTintColor = .yellow
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor: UIColor.red]
UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.red]

您应该将其放在您确定编译器读取的地方，就像在init（）方法中一样。

请注意，其中一些在Xcode 11 beta 5以下不起作用。