Swift・SwiftUI

【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に設定されている場合に適切な濃さで適用させる

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