[Lesson2-1]HStack、VStack、ZStackを使ってみる

・はじめに

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

・HStack、VStack、ZStack

SwiftUIではコードによって配置を指定していきます。よってstoryboardのようにはいきません。以下配置の基本StackViewです。
HStack：垂直に配置
VStack：水平に配置
ZStack：重ねて配置
と言う感じです。

・Vstack

import SwiftUI

struct ContentView: View {
   var body: some View {
       VStack {
               Text("Hello World")
               Text("This is inside a stack")
           }
       }
   }

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

・Hstack

import SwiftUI

struct ContentView: View {
   var body: some View {
       HStack {
               Text("Hello World")
               Text("This is inside a stack")
           }
       }
   }

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

・Vstack

import SwiftUI

struct ContentView: View {
  var body: some View {
      ZStack {
              Text("Hello World")
              Text("This is inside a stack")
          }
      }
  }

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
      ContentView()
  }
}

いかがでしょうか？
簡単に配置を宣言する事ができます。

次に間隔など細かい部分にも触れていきます。

import SwiftUI

struct ContentView: View {
   var body: some View {
       VStack(spacing:50) {
               Text("Hello World")
               Text("This is inside a stack")
           }
       }
   }

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

・左詰め、右詰め

左詰め
VStack(alignment: .leading)
右詰め
VStack(alignment: .trailing)

以上HStack、VStack、ZStackでした！