【SwiftUI】公式チュートリアルをやってみよう #3 | StackでViewを並べて表示しよう

StackでViewを並べて表示する

VStackでViewを縦並びに表示する

Viewを1列に並べて表示するには、Stackを使用します。まずは、VStackでViewを縦方向に並べてみます。

Text()部分をCommandキー + 左クリックし、編集ポップオーバーを表示させたら、Embed in VStackを選択します。

すると、Text()を囲うようにVStackが追加されると思います。
※前回の記事では、Text(“ありがとう”)となっておりましたが、チュートリアルに合わせるよう、Text(“Turtle Rock”)に変更しております。

テキストの追加

続いて、新たにテキストを追加します。画面右上の+ボタンをクリックし、Textを検索します。Textが見つかりましたら、Text(“Turtle Rock”)の下にドラッグ＆ドロップします。

すると、新たなTextが追加されますので、テキストを”Joshua Tree National Park”に変更し、さらにFontを.subheadlineに設定します。

alignmentで配置を変更する

続いて、Viewの配置を変更してみたいと思います。VStackで並べられたViewは、デフォルトでは中央揃えで配置されます。これを、左揃えに変更します。

Inspectorを表示し、Alignmentの左揃えをクリックします。

VStack内のViewが左揃えになりましたね。

HStackでViewを横並びに表示する

続いて、HStackでViewを横並びに表示してみます。先ほどのVStackと同じように、Text(“Joshua Tree National Park”)を囲うようにHStackを追加します。

追加できましたら、Text(“California”)を追加し、Fontを.subheadlineにします。

Spacerで空白を追加する

続いて、Spacerで、空白を挿入したいと思います。

先ほど追加したText(“California”)の上に、Spacer()を追加します。

テキストの間に空白が挿入されましたね。Spacerは、その親View(今回の場合HStack)のエリアいっぱいに、他の子View(今回の場合2つのText)が収まるように空白を挿入します。

試しに、Text(“Turtle Rock”)とHStackの間にSpacer()を追加した場合は、以下のように空白が表示されます。

paddingで余白を追加する

最後に、テキストの周りに余白を表示したいと思います。余白を表示するには、paddingを追加します。

余白が表示されましたね。ちなみに、padding(24)というように、余白の幅を指定することもできます。
※自分の環境で試してみたところ、padding()は、padding(16)と同じ余白幅となりました。

今回のチュートリアルはここまでとなります。ありがとうございました。