SwiftUIのNavigationViewで画面全体に背景色を適用する
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)
}
}
}