はじめに
前回からの続きで、SwiftUIのチュートリアル入門になります。
もと記事サイト
![](https://tatsunori-morita.com/wp-content/uploads/cocoon-resources/blog-card-cache/8c8f6e4facf0020077138aac5f26c7f0.jpg)
Step0
ここではStackの使い方を紹介します。body
プロパティは一つのviewしか返却できません。そのため複数のviewを使用するには、ここで紹介するStackを使用します。
Step1
コード上のText
をCommand
を押しながらクリック、ポップバーが表示されるので、Embed in VStack
を選択します。Vstack
を使用することで複数のviewを垂直方向に配置することができます。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-9.png)
Step2
Xcodeの右上にある+
ボタンを押すと、もう一つウィンドウが表示されます。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-10.png)
上部中央にボタンが5つ並んでおり、右からコントローラ
、アクション
、スニペット
、メデイア
、カラー
画面に切り替えできます。
・コントローラー
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-11.png)
・アクション
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-12.png)
・スニペット
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-13.png)
・メディア
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-15.png)
・カラー
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-16.png)
今回はコントローラ内にあるText
を選択し、Turtle Rock
のTextの下にドラッグ&ドロップします。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-17.png)
Step3
新規追加したText
の文字を“Joshua Tree National Park”に変更しました。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-18.png)
Text("Joshua Tree National Park")
の下に.font(.subheadline)
を追加します。
フォントファイズが小さくなりましたね。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-19.png)
Step5
VStackのinitializerに表示位置のプロパティを追加し、左端揃いで表示するようにします。
何も指定しない場合、デフォルトはセンター表示になります。
VStack(alignment: .leading)
を追加しました。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-20.png)
文字が左端揃いになってますね。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-21.png)
Step6
次はポップバーからHStack
を使い、水平方向にTextを並べます。
プレビュー画面で“Joshua Tree National Park”のtextをCommand
を押しながらクリックします。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-22.png)
“Joshua Tree National Park”がHStack
の中に含まれました。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-23.png)
HStackの中にもう一つTextを追加します。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-24.png)
“Joshua Tree National Park”のあとに”California”が水平位置に続いて表示されていますね。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-25.png)
Step8
Spacer
を使ってParkとStateの間にスペースを入れます。
これによって真ん中に表示されていた文字がサイドに広がり、画面いっぱいに表示されます。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-26.png)
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-27.png)
Step9
最後に、Padding()
メソッドを追加してVStackの周りに余白を追加します。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-28.png)
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-29.png)
余談
ちょっと分かりづらいので、paddingで付けた余白に色を付けてみました。
緑色の部分が余白になります。今回の場合だと上下左右に余白が付いています。
![](https://tatsunori-morita.com/wp-content/uploads/2021/01/image-30.png)
まとめ
レイアウトを組む際にstackは必須になるかと思います。
今回のような簡単な使用ではUIKitのstackviewより使いやすくなっているかまだ分かりませんが、
複雑な入れ子になった場合にコードでも構造を把握できるので、
意図したレイアウトにならない場合にデバッグしやすいかなと思います。
コメント