【SwiftUI】画面の背景色指定

画面の背景色を指定する方法を解説します。
UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか?

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.1
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15

サンプルソース

【画像1:背景色の指定】

解説

ZStackを使って、表示コンテンツの下に背景色を重ねる仕組みで実現します。

.edgesIgnoringSafeArea(.all) を付加する事で、背景色の表示領域をセーフエリア外まで拡張しています。
これにより、背景色が画面いっぱいに表示されます。

おまけ

背景色の部分を次のコードに置き換えて、グラデーション表示にするなんて芸当も簡単にできます。

【画像2:背景色をグラデーション表示に】

あわせて読みたい記事

【SwiftUI】色の指定方法
SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack)
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。本記事では3つのStack View(VStack、HStack、ZStack)の使い方を解説します。
SwiftUI
スポンサーリンク
スポンサーリンク
カピ通信

コメント