画面の背景色を指定する方法を解説します。
UIKitではUIViewControllerのプロパティで設定しますが、SwiftUIではどうするのでしょうか？
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.1
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15
【Swift】5.1
【iOS】13.1.3
【macOS】Catalina バージョン 10.15
サンプルソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import SwiftUI struct ContentView: View { var body: some View { ZStack { Color.yellow .edgesIgnoringSafeArea(.all) Text("背景色の指定") } } } |
解説
ZStackを使って、表示コンテンツの下に背景色を重ねる仕組みで実現します。
.edgesIgnoringSafeArea(.all) を付加する事で、背景色の表示領域をセーフエリア外まで拡張しています。
これにより、背景色が画面いっぱいに表示されます。
おまけ
背景色の部分を次のコードに置き換えて、グラデーション表示にするなんて芸当も簡単にできます。
|
1 2 3 4 |
LinearGradient(gradient: Gradient(colors: [.white, .yellow]), startPoint: .top, endPoint: .bottom) .edgesIgnoringSafeArea(.all) |
あわせて読みたい記事
【SwiftUI】色の指定方法（Color）
（2020/8/13 更新）SwiftUIでの色の指定方法を解説します。色の指定にはColor構造体を使用します。
capibara1969.com
2020.02.09
【SwiftUI】 Viewのレイアウト
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。本記事では３つのStack View（VStack、HStack、ZStack）を中心にレイアウト方法を解説します。
capibara1969.com
2020.02.08
