Terms Privacy

© Rollpie

Swift
03 Feb 2026

SwiftUI の Spacer と Divider でスペースを制御する

Spacer と Divider は、スタック内でビューの配置を調整するための補助ビューです。目に見えない空間を作る Spacer と、視覚的な区切り線を引く Divider を使い分けることで、レイアウトの余白や区切りを細かく制御できます。

Spacer：残りのスペースを埋める

Spacer は、スタック内で利用可能な空間を占有する透明なビューです。他のビューが必要なサイズを確保した後、残った余白を Spacer が吸収します。

HStack {
    Text("左寄せ")
    Spacer()
    Text("右寄せ")
}
.padding()

この例では、2 つの Text の間に Spacer を置くことで、テキストが左右に押しやられます。ナビゲーションバー風のレイアウトやセルの左右配置など、あらゆる場面で頻繁に使うパターンです。

VStack で Spacer を使うと、ビューを上端や下端に押し付けることができます。

VStack {
    Text("このテキストは上端に")
        .font(.headline)
    Spacer()
    Button("このボタンは下端に") {
        // アクション
    }
    .buttonStyle(.borderedProminent)
}
.padding()

Spacer を複数配置すると、スペースが均等に分配されます。3 つのビューの間に 2 つの Spacer を置けば、等間隔の配置が実現します。

minLength でスペースの最小値を指定する

Spacer は minLength パラメータを受け取ります。これを指定すると、どんなに画面が狭くなっても最低限のスペースが確保されます。

HStack {
    Text("名前")
    Spacer(minLength: 20)
    TextField("入力してください", text: $name)
}

minLength を省略した場合、デフォルトの最小値（プラットフォームごとに異なる値）が適用されます。明示的に minLength: 0 を設定すると、他のビューに押されて完全にスペースがなくなることも許容されるようになります。

Divider：視覚的な区切り線

Divider は薄いグレーの線を描画するビューです。セクション間や項目間の区切りとして使います。

VStack(alignment: .leading, spacing: 12) {
    Text("アカウント情報")
        .font(.headline)
    Divider()
    HStack {
        Text("名前")
        Spacer()
        Text("田中太郎")
            .foregroundColor(.secondary)
    }
    Divider()
    HStack {
        Text("メール")
        Spacer()
        Text("tanaka@example.com")
            .foregroundColor(.secondary)
    }
}
.padding()

VStack 内の Divider は水平線として描画され、HStack 内に置くと垂直線になります。Divider はスタックの方向に対して直交する線を自動で描くという点がポイントです。

Spacer

透明で目に見えない空間を作る。スタック内のビューを端に寄せたり、等間隔に配置するときに使う

Divider

目に見える薄い区切り線を描画する。セクションや項目の境界を視覚的に示すときに使う

Spacer と Divider を組み合わせる

実践的なレイアウトでは、Spacer と Divider を併用することがほとんどです。設定画面風の UI を組んでみましょう。

VStack(spacing: 0) {
    HStack {
        Label("Wi-Fi", systemImage: "wifi")
        Spacer()
        Text("接続済み")
            .foregroundColor(.secondary)
        Image(systemName: "chevron.right")
            .foregroundColor(.secondary)
    }
    .padding()
    
    Divider()
        .padding(.leading)
    
    HStack {
        Label("Bluetooth", systemImage: "bluetooth")
        Spacer()
        Text("オン")
            .foregroundColor(.secondary)
        Image(systemName: "chevron.right")
            .foregroundColor(.secondary)
    }
    .padding()
}

Divider に .padding(.leading) を付けると、左端にインデントが入った区切り線になります。iOS の設定アプリでよく見かけるスタイルで、こうした小さな調整の積み重ねが完成度の高い UI につながります。

2 views