[SwiftUI] VStack、HStack、ZStack によるレイアウト

複数のアイテムを設定するために、VStack、HStack、ZStackを使ってレイアウトできます。

またLazyVStack, LazyHStackというのも新しく追加されました。

Swift 5.3
Xcode 12.4




Stack

 
SwiftUIのTextやImageなどのviewは、個別のbody propertyでlayoutを記述します。

但し、body propertyは単一のviewしか返さないので
複数のviewを扱うためにStackを使います。

  • VStack
    垂直方向に並べます。


 

VStackを使ってレイアウトをする上で、alignmet、spacing、backgroundの背景色等はどのように設定するのか確認してみ...
 

  • HStack
    水平方向に並べます。


 

HStackを使ってレイアウトをする上で、alignmet、spacing、backgroundの背景色等はどのように設定するのか確認してみ...
 

  • ZStack
    Viewを重ねることができます。


 

ZStackを使ってレイアウトをする上で、alignmet、background、frame等はどのように設定するのか確認してみます。
 

 

VStack

 
Projectを作成してHello Worldが記述されているところから
「Text」を選択してCommand + クリックでActions ダイアログを表示
Embed in VStack」を選びます。

Editorでは、

Text(“Hello World”)
.padding()

がVStackで挟まれた状態になります。

このTextにもう1つTextを追加して垂直方向に並べてみましょう。

Xcodeの右上にある「+」アイコンをクリックし
「□」を選択するとContorl Viewsを選べるようになり、
そのなかにTextがあります。

TextをそのままEditorのHello Worldの下にドラッグ

この辺りは直接記述したほうが早い気がしますが、使い方として覚えておきましょう(但し、やり方が変更されることも多いです)

Previewで見ると文字列が垂直方向に並んで配置されました。

Code Editorの「VStack」を選択してInspectorからAlignmentの「左寄せ」を選ぶと
.leadingに設定されるのがわかります。

Previewでは2列の先頭が左に寄せられています。

 

HStack

 
HStackで設定します。

Text(“Placeholder”) が横に並んでレイアウトされているのがわかります。

 

ZStack

 
重ねるViewは画像でもいいのですが、ここではCircle()を使ってみます。
 

 
円と文字列が重なりました。

 

LazyZStack/LazyHStack

 
LazyVStackにはサンプルコードがあるのですが、ForEachの回数が少ないので効果がわかりませんでしが、回す回数を増やしてみるとどのようになるかわかります。

このコードではエラーとなります。
Previewのエラーではありますがいずれにしてもこれは使えないということです。

Lazyというのは「怠惰な」という意味ですが、きっちり表示するデータを揃えているとメモリがいっぱいになるので、(いい加減に?)見えているところしか用意していないという機能のようです。

VStackをLazyVStackに変更

とりあえずエラーにはならず、表示がされています。

LazyHStackも同様です。
ScrollView(.horizontal) と水平方向のスクロールに変更します。

 
 
References:
SwiftUI Tutorials — Tutorials | Apple Developer Documentation
VStack – SwiftUI | Apple Developer Documentation
HStack – SwiftUI | Apple Developer Documentation
ZStack | Apple Developer Documentation
LazyVStack | Apple Developer Documentation
LazyHStack | Apple Developer Documentation




一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。



TECH ACADEMY
iPhoneアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。



CodeCamp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン


シェアする

  • このエントリーをはてなブックマークに追加

フォローする