SwiftUIのNavigationViewで画面全体に背景色を適用する

2 min read読了の目安(約2100字 3

SwiftUIのNavigationViewで画面全体に背景色を適用するにはZStackを利用する。

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.green.edgesIgnoringSafeArea(.all)
                Text("Hello, SwiftUI")
                    .font(.title)
            }
            .navigationTitle("NavigationView")
        }
    }
}

NavigationViewのタイトルがインラインで表示された時に期待通りにならない。

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.green.edgesIgnoringSafeArea(.all)
                Text("Hello, SwiftUI")
                    .font(.title)
            }
            .navigationTitle("NavigationView")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

これを回避するにはUIKitの機能を使ってNavigationBarの色を指定すると良い。タイトルの色も適宜指定する。

let coloredNavAppearance = UINavigationBarAppearance()

struct ContentView: View {
    init() {
        coloredNavAppearance.configureWithOpaqueBackground()
        coloredNavAppearance.backgroundColor = UIColor.init(red: 41/255, green: 199/255, blue: 50/255, alpha: 1.0)
//        coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.black]
//        coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.black]
        UINavigationBar.appearance().standardAppearance = coloredNavAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance
    }
    var body: some View {
        NavigationView {
            ZStack {
                Color(red: 41/255, green: 199/255, blue: 50/255, opacity: 1.0).edgesIgnoringSafeArea(.all)
                Text("Hello, SwiftUI")
                    .font(.title)
            }
            .navigationTitle("NavigationView")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}