【SwiftUI 3.0】親Viewの色を子Viewの背景色に適用する

動作確認環境

macOS Monterey 12.0.1

Xcode 13.2.1

iOS 15.2(iPhone 13 mini シミュレータ)

【SwiftUI 3.0】親Viewの色を子Viewの背景色に適用する

SwiftUI 3.0 より .background プロパティに以下の5種類の引数が追加されました。

これらを指定すると、親のViewの色が、その子のViewの背景色に適用されるようになります

以下のように、指定する引数によってその影響度が異なります。

  • .thin :やや薄めの影響度
  • .thick :やや濃いめの影響度
  • .ultraThin :薄めの影響度
  • .ultraThick :濃いめの影響度
  • .regular :中間の影響度
サンプルコード
struct ContentView: View {
    var body: some View {
        VStack {
            ZStack {
                Color(.gray)
                Text("ultraThin")
                    .padding()
                    .background(.ultraThinMaterial)
            }
            ZStack {
                Color(.gray)
                Text("thin")
                    .padding()
                    .background(.thinMaterial)
            }
            ZStack {
                Color(.gray)
                Text("regular")
                    .padding()
                    .background(.regularMaterial)
            }
            ZStack {
                Color(.gray)
                Text("thick")
                    .padding()
                    .background(.thickMaterial)
            }
            ZStack {
                Color(.gray)
                Text("ultraThick")
                    .padding()
                    .background(.ultraThickMaterial)
            }
        }
    }
}
実行結果

Text そのものは gray のカラーを設定している訳ではありませんが、しっかり親Viewの背景色の影響を受けていることがわかると思います。

使い所としては、

  • 重要な機能のボタン濃いめ重要度の低いボタン薄めにする
  • アプリのテーマカラーが背景のViewに設定されている場合に適切な濃さで適用させる

などが挙げられるでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です