VStackとHStackとZStack

前の記事で、VStackやHStackなどをつかいました。ところで、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の上側に置くと、下に行きます。

まとめ

おすすめの本

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

リンク

リンク