見出し画像

Swiftで行こう!--SwiftUIもっと!3

レイアウトです。

UIKitでいう UIStackViewです。SwiftUIではVStack,HStack,ZStakです。

Vは縦、Hは横、Zは奥行きの設定をします。

単純に

    var body: some View {
     Text("Hello")
     Text("Hello")
   }

こうかくとエラーが出ます。なんで縦に書きたい場合は

 VStack{   
       Text("Hello")
       Text("Hello")

横は

HStack{   
       Text("Hello")
       Text("Hello")

とします。

テキストを揃たり、スペースを開ける場合は

VStack(alignment: .leading, spacing: 20)

な感じで書きます。alignmentは揃えです。leadingは前、centerは中央、trailingは後ろ揃えです。

次は行ごとで行間が欲しい時がありますね。そういう時はPadding()

  VStack{
       Text("Hello")
       Text("Hello")
           .padding(.bottom,100)
       Text("Hello")
    }

こうすると、

真ん中の下の行間が空きました。

最後にZStackですが、

 ZStack() {
           Image(uiImage: #imageLiteral(resourceName: "cosmos.jpeg"))
           Text("Hacking with Swift")
               .font(.largeTitle)
               .foregroundColor(.white)
       }

とすることで重ねて表示出来ます。とりあえず、書いていく順番で上層になっているようです。

この記事が気に入ったらサポートをしてみませんか?