【SwiftUI基礎】Stack View徹底解説(VStack・HStack・ZStack)

本記事では、SwiftUIの基礎であるVStack ,HStack,ZStackについての特徴と使い方を実際のコードと画面を出しながら紹介していきます。

1. Stack Viewとは
2. VStack
3. HStack
4. ZStack
5. 最後に

Stack Viewとは

SwiftUIで利用可能な、ボタンやテキストボックスといった要素を縦や横などに並べて配置することのできるViewのことです。

Stack Viewの中に要素を入れることで好きに並べていくことができ、一覧表示するメモアプリなどの機能を作成することができます。ここから実際に、要素を縦に並べる、横に並べる、前後に並べるStackViewについて順に解説していきます。

VStack

VStackは、中に配置した要素を縦に並べるStackViewです。今回はSwiftUIで標準で用意されている四角を表す図形であるRectangle()を使用して解説していきます。

まず一つのRectangle()をVStackの中に配置していきます。背景色を緑にするためにforegroundColor()を使用して色を設定します。

var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(.green)
        }
        .padding()
    }

実行結果

VStack内の要素が一つの場合には画面全体に要素が拡がって表示されていることがわかります。

次に、Vstackの中に青色のRectangleをもう一つ追加していきます。

var body: some View {
        VStack {
            Rectangle()
                .foregroundColor(.green)
            Rectangle()
                .foregroundColor(.blue)
        }
        .padding()
    }

実行結果

このように、Vstackの中に複数の要素を入れると縦に並んで表示することができます。

要素が1つの時と同じ画面全体の中で要素2つが縦に2つ並びました。

VStack内に要素を追加していくと上に書いた要素から順に縦に並べて表示することが可能になります。

HStack

HStackは、中に追加した要素を横方向に並べていくことのできるStackViewです。

早速先ほどと同様に緑の四角と青い四角をHStackで囲んでいきます。

var body: some View {
        HStack {
            Rectangle()
                .foregroundColor(.green)
            Rectangle()
                .foregroundColor(.blue)
        }
        .padding()
    }

実行結果

このようにVStackをHStackに変更しただけで図形が横に並んでいることがわかります。

HStackの中に要素を記述した順に左から並べて表示することができます。

ZStack

Zstackは前後方向に要素を重ねて表示するためのStackViewです。

実際に2つの要素をZstackの中に入れていきます。

var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.green)
            Rectangle()
                .foregroundColor(.blue)
        }
        .padding()
    }

実行結果

ZStackは、下に書いている要素から順に前列に並んでいくため、見た目ではわかりませんが、後ろに緑色の四角、前列に青色の四角が並んでいる形になります。

実際に前後関係を確認するために、Rectangleオブジェクトで使用できる.frame()というモディファイアを使用して図形のサイズを変更し、前後に並んでいることを確認していきます。

var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.green)
                .frame(width: 200, height: 200)
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 100, height: 100)
        }
        .padding()
    }

実行結果