[Lesson2-2] .backgroundを使ってみる

・はじめに

このシリーズは自分自身の学習記録を自分が後に振り返れるように記録していく事が目的です。よって”見やすく”と言う観点では作成されていません。
しかし、私自身の成長と後の成果が、この記録に大きな意味をもたらしてくれると思いStudyLog＝SLogを始めようと思い始めました。
この記録が技術的な事はもちろん、他の要因でも、いつか誰かの役にたてば幸いです。また私の成長記録も暖かい目で見て頂けると嬉しいです。
では早速本日の記録をスタートしていきましょう！

・ZStackで背景に色を付ける

前回のレッスンでZStackは重ねる事を確認しました。文字を重ねるのはあまり意味を無しませんので色を重ねてみたいと思います。

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
             Color.red
             Text("Your content")
         }
   }
}
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

背面真っ赤です。
文字の後ろにだけ背景を付けたい場合は

ZStack {
             Text("Your content")
               .background(Color.red)
         }

カラー範囲を指定したい場合はframを使うと指定できる。

ZStack {
           Color.red.frame(width: 200, height: 200).background(Color.red)
           Text("Your content")
             
         }

余談ですがZStackでは後に記述したものが前面にくる性質があるので
以下のようにすると文字が消えます。

ZStack {
           Text("Your content")
           Color.red.frame(width: 200, height: 200).background(Color.red) 
         }

前面にカラーを入れたい場合は

import SwiftUI

struct ContentView: View {
   var body: some View {
      ZStack {
          Color.red.edgesIgnoringSafeArea(.all)
          Text("Your content")
      }
   }
}
struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

以上です。