前の記事で、VStackやHStackなどをつかいました。ところで、VStackやHStackとは何なのでしょうか。

何が違うの?
HStack | VStack |
---|---|
並びかた | |
ボタンなどを横に並べて表示! 部品をHStackで囲むと、横に均等に自動で並べてくれます。 |
ボタンなどを縦に並べて表示! 部品をVStackで囲むと、縦に均等に自動で並べてくれます。 |
何の略? | |
Horizonatal Stack 水平に並べるので水平スタックです。 |
Vertical Stack 垂直に並べるので垂直スタックです。 |


使い方
HStackの使い方
Live Modeを使えば、Textの隣にドロップすればいいだけです。他の方法は、今あるTextをcommand+クリックしてこのようなものを表示させます。

そうしたらEmbed in HStackをクリックします。するとHStackで囲まれるので、その中にTextをドロップします。
HStack { Text("Hello world") Text("Hello") }
こんな感じです。
VStackの使い方
VStackもHStackと同じようにできます。
コード上でのやり方はcommand+クリックでEmbed in VStackをクリックし、Textを追加します。

VStack { Text("Hello world") Text("hello") }
この中にコードを書くことで、縦に並べたり横に並べたりできます。
間隔を開ける
それでは並べた時に間隔を開けたいときはどうしたらいいのでしょうか。それは、(spacing: )を使えば間隔を開けることができます。詳しいやり方はこんな感じ。
VStack (spacing: 10) { Text("hello") Text("goodmorning") }
VStackなどの後につけることで間を開けられます。
ZStack
VStackやHStackに加えてもう一つZStackというものがあります。これは縦や横に並べるのではなく、奥に並べるものです。
ZStack { Button(action: {}) { Text("押して!!") .foregroundColor(.white) .font(.largeTitle) .frame(width: 200, height: 70, alignment: .center) .background(Color.orange) } Text("Hello, World!") }
このようにZStackを作った場合、このようになります。

ボタンなどを重ねることができます。ZStackの上側に置くと、下に行きます。

まとめ
・全てのStackは均一に部品を並べてくれる!!
・VStackは縦に、HStackは横に、ZStackは奥に均一に部品を並べてくれる!!
Swiftを始める時にインターネットだけでの独学は難しい!!と考える人もいると思います。「SwiftUI iPhoneアプリ開発入門ノート」は丁寧に解説してくれるのでとても便利です。