SwiftUIの新機能を試してみる

ナビゲーションバー、タブバー、ツールバーの背景色をカスタマイズする方法

toolbarBackground()を使うと、ツールバーの見え方をカスタマイズでき、NavigationStack、TabView、その他のツールバーのスタイルを制御できる。

重要｜ここで選択した背景は、常にではなく、システムが必要と判断した時に使用される。つまり、以下のコードでは、NavigationStackは最初は色無しで表示されるが、リストがスクロールされるとすぐに色が変わる。

        NavigationStack {
            List(0..<100) {
                Text("Row \($0)")
            }
            .navigationTitle("100 Rows")
            .toolbarBackground(.teal)
        }

.toolbarBackground(.teal)を使用しても、どのツールバーを.tealにするかは指定されていないので、主要なツールバーを選択するのはシステム次第。

1つまたは2つのタイプのバーに色をつけたい場合、あるいは各バーに異なるスタイルを提供したい場合、.toolbarBackground()に2番目のパラメータを指定して、さらに制御を行うことができる。例えば、タブバーとナビゲーションバーの両方に色をつけるようにシステムに要求することができる。

        TabView {
            NavigationStack {
                List(0..<100) {
                    Text("Row \($0)")
                }
                .navigationTitle("100 Rows")
                .toolbarBackground(.orange, for: .navigationBar, .tabBar)
            }
        }

もう一つ重要な使い方として、背景色を指定する代わりに背景を完全に隠すようにシステムに依頼することができる

        NavigationStack {
                List(0..<100) {
                    Text("Row \($0)")
                }
                .navigationTitle("100 Rows")
                .toolbarBackground(.hidden)
        }

この例では、ユーザーがスクロールすると、リストのコンテンツがナビゲーションタイトルと一緒に直接表示される。この方法を取る場合は、メインコンテンツとツールバーのコンテンツがカサなた時に、衝突しないようにすること。