初心者でもわかるswiftUI Vol.6

どうも、１０月に入ったばかりなのに暖房を入れようか検討してるくらい寒い北海道に住んでいるかわさきです。

前回はテキスト説明を主に行いました。今日はレイアウトについての話をしていこうと思っています。

14.HStackとは

レイアウト、見た目を整える上で欠かせないものです。
そこで必要になるHStackやVStackを使いこなすのが重要です。

HStackは横方向に見た目（View）を整えることです。
WelcomeViewにいってみましょう。

 HStack{
       Text("Masashi")
           .padding()
           .background(Color.blue)
   Text("Kawasaki")
       .padding()
       .background(Color.red)
       
    }

名前の苗字と名を分けて入力してみましょう！backgroundの色は別々にしておくと見やすいです。
これを入力すると次のようになっていればクリアです。

上手く並んでいると思います。
ここにalignment（HStackをどの位置に置くか）とspacing（どのくらいの間をとるか）を設定していきます。

HStack(alignment:.center,spacing:30) {
       Text("Masashi")
           .padding()
           .background(Color.blue)
       Text("Kawasaki")
           .padding()
           .background(Color.red)
       
    }

alignmetを中央、間隔を３０とってみました。

上のコードでやったものとは大きな違いがあるのがわかったと思います。
この技術はたくさん使う場面があると思いますのでしっかり身につけましょう。

15.VStackとは

HStackが横方向なのに対し、VStackは縦方向にViewを整えてくれます。

HStack(alignment:.center,spacing:30) {
       Text("Masashi")
           .padding()
           .background(Color.blue)
  　　　 Text("Kawasaki")
       　　 .padding()
           .background(Color.red)
       
    }

このコードを入力すると縦方向に整えてくれます。
すでにalignemtとspacingは入力しています。

このように縦にしっかり並んでいればクリアです！

16.ZStackとは

HStackが横方向、VStackが縦方向なのに対し、ZStackは背面方向というイメージでしょうか。複雑なので説明が難しいですが、今はそのくらいの解釈で大丈夫だと思います。

  ZStack(alignment: .center) {
           Text("Masashi")
               .padding(20)
               .background(Color.blue)
               .opacity(0.8)
           Text("Kawasaki")
               .padding(20)
               .background(Color.red)
               .offset(x: 0, y: 40)
           }

opacity（不透明度の数値）offset（細かい位置を調整する　x:横 y:縦　グラフのイメージです）を加えて入力してみましょう。

うまく前後に並んでいますね。数値はお任せしますが、このようになっていればクリアです！今日はここまで！

まとめ

今日はレイアウトについて書いてみました。次回はスペーシングといければ画像の挿入について書いていこうと思います。

HStack,VStack,ZStackは多用する技術なのでしっかり理解して使えるようにしましょう。私も、これを習った時はあまりうまく使えませんでしたがある時急に理解できるようになりました笑　慣れってやつですね。

今までの内容は「プロフィール→マガジン→swiftUI情報発信」というところにまとめているので見返してみて下さい。

読んでいただきありがとうございます😊

読んでくださった方はぜひハートをお願いします✋