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

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

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

Xcode 13.4.1

Stack

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

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

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

[SwiftUI] VStackの配置、余白、背景色等の設定

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

2022-06-23 14:21

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

[SwiftUI] HStackの配置、余白、背景色等の設定

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

2022-06-23 14:20

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

[SwiftUI] ZStackの配置、余白、背景色等の設定

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

2022-06-23 14:19

目次
1. VStack
2. HStack
3. ZStack
4. LazyVStack, LazyHStack

VStack

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

Text()がVStackで挟まれた状態になります

VStack {
    Text("Hello, world!")
       .padding()
}

VStack {

Text("Hello, world!")

.padding()

}

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

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

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

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

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World!")
                .padding()
            Text("Placeholder")
                .padding()
        }
    }
}

struct ContentView: View {

var body: some View {

VStack {

Text("Hello World!")

.padding()

Text("Placeholder")

.padding()

}

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

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

VStack(alignment: .leading) {
    Text("Hello") 
    Text("Placeholder") 
}

VStack(alignment: .leading) {

Text("Hello")

Text("Placeholder")

}

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

HStack

VStackど同様の設定をしてみましょう

「Text」を選択してCommand + クリックでActions ダイアログを表示
「Embed in HStack」を選び、Text()をLibraryから追加します。

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hello World")
                .padding()
            Text("Placeholder")
                .padding()
        }
    }
}

struct ContentView: View {

var body: some View {

HStack {

Text("Hello World")

.padding()

Text("Placeholder")

.padding()

}

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

ZStack

VStackど同様の設定をしてみましょう

「Text」を選択してCommand + クリックでActions ダイアログを表示
「Embed in VStack」を選び、Circle()をLibraryから追加します。

Circle()をModifiresでサイズを指定します。ただこのままではText()がわからないのでCircle()にforegroundColorでオレンジ色をつけてみます　

struct ContentView: View {
    var body: some View {
        ZStack{
            Circle()
                .frame(width: 150,
                       height: 150,
                       alignment: .center)
                .foregroundColor(.orange)
            Text("Hello, world!")
                .padding()
        }
    }
}

struct ContentView: View {

var body: some View {

ZStack{

Circle()

.frame(width: 150,

height: 150,

alignment: .center)

.foregroundColor(.orange)

Text("Hello, world!")

.padding()

}

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

LazyZStack/LazyHStack

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

たとえばスクロールListなどで、たくさんのTextを読み込んでいきます。ただスクロールして見えなくなってしまうものも取り込んだままだとメモリを圧迫することになるので、適当に表示されているところだけにしてもいいじゃん的なことをやってくれるものです。

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

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                ForEach(1...1000000000000, id: \.self) {
                            Text("Row \($0)")
                }
            }
        }
    }
}

struct ContentView: View {

var body: some View {

ScrollView {

VStack {

ForEach(1...1000000000000, id: \.self) {

Text("Row \($0)")

}

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

VStackをLazyVStackに変更

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1...1000000000000, id: \.self) {
                            Text("Row \($0)")
                }
            }
        }
    }
}

struct ContentView: View {

var body: some View {

ScrollView {

LazyVStack {

ForEach(1...1000000000000, id: \.self) {

Text("Row \($0)")

}

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

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

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(1...1000000000000, id: \.self) {
                            Text("Row \($0)")
                }
            }
        }
    }
}

let colors: [Color] =

[.red, .orange, .yellow, .green, .blue, .purple]

struct ContentView: View {

var body: some View {

ScrollView(.horizontal) {

LazyHStack {

ForEach(1...1000000000000, id: \.self) {

Text("Row \($0)")

}