SwiftUIシンタックス

VStackとHStackとZStack

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

入力した文字を表示させよう!今回からは、とうとうアプリを作っていきます。と言ってもいきなりとてもすごいものを作るのも無理だし、どういうふうにすればいいのかもわからな...

何が違うの?

HStackとVStack
HStack VStack
並びかた

ボタンなどを横に並べて表示!

部品をHStackで囲むと、横に均等に自動で並べてくれます。

ボタンなどを縦に並べて表示!

部品をVStackで囲むと、縦に均等に自動で並べてくれます。

何の略?

Horizonatal Stack

水平に並べるので水平スタックです。

Vertical Stack

垂直に並べるので垂直スタックです。

VStack
HStack

使い方

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の上側に置くと、下に行きます。

まとめ

VStackとHStackとZStack

・全てのStackは均一に部品を並べてくれる!!

・VStackは縦に、HStackは横に、ZStackは奥に均一に部品を並べてくれる!!

おすすめの本

Swiftを始める時にインターネットだけでの独学は難しい!!と考える人もいると思います。「SwiftUI iPhoneアプリ開発入門ノート」は丁寧に解説してくれるのでとても便利です。

COMMENT

メールアドレスが公開されることはありません。