LoginSignup
2
2

More than 1 year has passed since last update.

[SwiftUI] NavigationBar の背景色を変える方法

Last updated at Posted at 2021-08-01

こんな感じです:

large
スクリーンショット 2021-08-01 午後11.36.15.png

inline
スクリーンショット 2021-08-01 午後11.36.23.png

↓Backボタンを表示するために NavigationLink 先を preview しています

import SwiftUI

struct LargeTitleView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .blue // 背景色
        UINavigationBar.appearance().largeTitleTextAttributes = [ .foregroundColor: UIColor.white] // タイトル色
        UINavigationBar.appearance().tintColor = .white // backボタン色
    }
    var body: some View {
        VStack {
            Text("Hello, world!")
                .navigationTitle("title")
        }
    }
}

struct InlineTitleView: View {
    init() {
        UINavigationBar.appearance().barTintColor = UIColor.blue // 背景色
        UINavigationBar.appearance().titleTextAttributes = [ .foregroundColor: UIColor.white] // タイトル色
        UINavigationBar.appearance().tintColor = .white // backボタン色
    }
    var body: some View {
        VStack {
            Text("Hello, world!")
                .navigationTitle("title")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct TitleView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            NavigationView {
                NavigationLink(destination: LargeTitleView(), isActive: .constant(true)) { EmptyView() }
            }
            NavigationView {
                NavigationLink(destination: InlineTitleView(), isActive: .constant(true)) { EmptyView() }
            }
        }
    }
}

バージョン
Swift 5.4

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2