【SwiftUI】VStackとHStackを使いこなしてテキストを自由に配置する

今回はSwiftUIでテキストを自由に配置する方法を紹介します。

縦に並べたり、横に並べたり、上下左右中央寄せの方法などもあり、様々な場面で必要となるテクニックなので最後まで読んでいただけると幸いです！
また、テキスト以外にもボタンや入力欄など全ての要素の配置に共通する書き方になるのでしっかり理解して覚えておきましょう。

テキストの配置方法については以前の記事を参考にしてください。

VStackとHStackそれぞれの配置
VStackとHStackを入れ子にして配置する
まとめ
SwiftUI勉強中の方へ

VStackとHStackそれぞれの配置

VStack	縦並び
HStack	横並び

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Text1")
            Text("Text2")
        }
    }
}

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Text1")
            Text("Text2")
        }
    }
}

VStackとHStackを入れ子にして配置する

VStackとHStackは入れ子にすることでされに自由に配置をすることができます。
またSpacer()を使用することで均等にスペースを空けることができます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text("左-上")
                Spacer()
                Text("中央-上")
                Spacer()
                Text("右-上")
            }
            Spacer()
            HStack {
                Text("左-中央")
                Spacer()
                VStack {
                    Text("中央-中央1")
                    Text("中央-中央2")
                    Text("中央-中央3")
                }
                Spacer()
                Text("右-中央")
            }
            Spacer()
            HStack {
                Text("左-下")
                Spacer()
                Text("中央-下")
                Spacer()
                Text("右-下")
            }
        }
        .padding()
    }
}