Spacerの活用方法をマスターしよう

SwiftUIでは、Spacerを利用して柔軟なレイアウトを構築することができます。この記事では、Spacerの基本的な使い方から実用的な応用までを詳しく解説します。

基本的な使い方
1. 水平方向への活用
2. 垂直方向への活用
スペースの調整と均等な間隔の作成
コンテナ内の要素の位置調整
Spacerの応用例

基本的な使い方

水平方向への活用

Spacerを使って要素間のスペースを自動的に調整します。HStackと合わせて使用すると水平方向のスペースが調整されます。

import SwiftUI

struct SpacerSmpView: View {
    var body: some View {
        HStack {
            Text("left")
            Spacer()
            Text("right")
        }
    }
}

垂直方向への活用

Spacerは垂直方向に対しても同様にVStackと合わせて使用することで調整できます。

import SwiftUI

struct SpacerSmpView: View {
    var body: some View {
        VStack {
            Text("upper")
            Spacer()
            Text("under")
        }
    }
}

スペースの調整と均等な間隔の作成

複数のSpacerを使って、要素間の均等なスペースを調整できます。

import SwiftUI

struct SpacerSmpView: View {
    var body: some View {
        VStack {
            Text("upper")
            Spacer()
            Text("center")
            Spacer()
            Text("under")
        }
    }
}

コンテナ内の要素の位置調整

Spacerを使用して、コンテナ内の要素を特定の位置に配置できます。

以下のプログラムは均等のスペースを設ける場合です。

import SwiftUI

struct SpacerSmpView: View {
    var body: some View {
        HStack {
            Text("left")
            Spacer()
            Text("center")
            Spacer()
            Text("right")
        }
    }
}

引数のminLength（最小のスペース幅）を設定することで位置を調整することもできます。

import SwiftUI

struct SpacerSmpView: View {
    var body: some View {
        HStack {
            Text("left")
            Spacer()
            Text("center")
            Spacer(minLength: 200) // 最小200ポイントのスペース
            Text("right")
        }
    }
}

前述のプログラムと比較すると右側のスペースが広くなっていることが分かります。