如何在 SwiftUI 中設置 NavigationView 背景顏色

Question

我正在嘗試設置NavigationView的背景顏色。 我正在嘗試使用下面的代碼（部分來自 SwiftUI 教程）添加ZStack 。 然而，除非我用Spacer()替換NavigationView... ，否則它只會是白色的

    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

它與UINavigationBar相同。 但是由於還沒有直接的 api，您可以使用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 下將不起作用。

Answer 2

這似乎是使導航視圖透明的關鍵： UITableView.appearance().backgroundColor = .clear

感謝： https : //izziswift.com/swiftui-list-color-background/該代碼段。

這是我放在一起並使用針對 iOS 15 Beta 的 Xcode 13 Beta 進行測試的代碼：屏幕截圖...還使用部署到 iPhone 12 iOS 14.7 的 Xcode 13 Beta 進行了測試。

它可以與 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

這是我想出的解決方案...此解決方案還允許您將背景單元格着色為與列表元素不同的顏色。

因為 ZStack 不起作用並且 UIView/UINavigationBar.appearance().backgroundColor 會改變整個可見屏幕的顏色。

我想我會補充這一點，因為其他解決方案都不適合我。

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

}