NavigationBarの背景色を変える方法

このように、NavigationBarの背景色を変えたい時がありますよね。

今までは、initでUINavigationBar.appearance()を使って背景色を指定していたんですが、.toolbarBackgroundモディファイアを使うことで指定できるようです。

やり方〜

 var body: some View {
        NavigationStack {
            List {
                ForEach(0..<5) { item in
                    Text("世界")
                }
            }
            .navigationTitle("タイトル")
            .toolbarBackground(Color.blue, for: .navigationBar)
        }
}

navigationTitleでタイトルのテキストを指定します。
背景色は.toolbarBackgroundで上のように指定します。

この場合、上にスクロールした際に背景色が表示されるようになります。

常時背景色が見えるようにする

var body: some View {
        NavigationStack {
            List {
                ForEach(0..<5) { item in
                    Text("世界")
                }
            }
            .navigationTitle("タイトル")
            .toolbarBackground(Color.blue, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
}

.toolbarBackgroundを.visibleにすると、常時見えるようになります。
.hiddenにすると見えないようになり、.automaticにすると、指定してない時と同じになりました。

このように、常時背景色が指定された形になりました！

Listなど縦に長い時は、スクロールした際にNavigationBarの大きさや形が変わることは便利だと思いますが、あまり長くない時は固定したいですよね！

NavigationBarを固定する方法

var body: some View {
        NavigationStack {
            List {
                ForEach(0..<5) { item in
                    Text("世界")
                }
            }
            .navigationTitle("タイトル")
            .navigationBarTitleDisplayMode(.inline)
            .toolbarBackground(Color.blue, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
        }
}

.navigationBarTitleDisplayModeを.inlineにすると、固定されます！

まとめ

toolbarBackgroundモディファイアを使うことで、背景色を指定することができました！

もっと良い方法があれば、教えてください〜