[SwitUI]LinearGradient:グラデーションバックグラウンドの実装

📌 異なる色が必要な場合

SWIFTUIで色を設定する方法は難しくありません.
しかし、このような基本的な方法で色を表現する場合は単色にしか表現できない.
現在進行中のプロジェクトのデザイン原型では、次のグラデーションが既定の背景色になります.

では、このようなグラデーションをどのように実現するのでしょうか.

💻 グラデーション背景の実装

SWIFTUIには「LinearGradient」が存在し、画面にグラデーションカラーを表示できます.
以上の画像の色表現コードは以下の通りです.

LinearGradient(gradient: Gradient(colors: [Color("PrimaryColor"), Color("SubPrimaryColor")])

LinearGradientの使い方は簡単です.
グラデーションの2色と各色の始点と終点をParameterで表します.
コードの中でPrimaryColorはもっと濃い色ですトップから始まります.bottomはもっと浅いsubPrimaryColorで終わります.
ではこれを利用して画面の背景色を指定しましょう
サンプルコードは次のとおりです.

var body: some View {
        
        ZStack {
            
            LinearGradient(gradient: Gradient(colors: [Color("PrimaryColor"), Color("SubPrimaryColor")]),
                            startPoint: .top, endPoint: .bottom)
            .edgesIgnoringSafeArea(.all)
            
            VStack {
                
                Text("색 이쁘다ㅠ")
                    .foregroundColor(Color("EnabledColor"))
                    .fontWeight(.bold)
                
            } // VStack
            
        } // ZStack
        
    }

ZStackを使用して、一番下の背景に上記設定のGradient Colorを加えます.edgedIgnoringSafeArea(.all)が追加され、画面全体を色で覆うことができます.

生成された画面は次のとおりです.

📌 の最後の部分

グラデーションを表す方法としては、リニアグラデーションのほか、RadialGradient、AngularGradientなどがあります.
ただ色の置き方が違うだけで、使い方はLinearGradientとほぼ同じで、必要な色や一番好きな色を選ぶことができます.(もちろん、デザイナーが決めるのが普通です)

printf("Thank You!\n");
printf("Posted by Thirsty Developer\n");