Menu
Coddy logo textTech

配置と間隔

CoddyのSwiftジャーニー「SwiftUI入門」セクションの一部。レッスン 11/50。

VStackはビューを中央揃えにし、ビュー間に小さなデフォルトの間隔を空けます。スタックを作成するときに、どちらも変更できます:

VStack(alignment: .leading, spacing: 12) {
    Text("Order #42")
        .font(.headline)
    Text("2 coffees")
    Text("Ready at 10:30")
}

alignment: .leadingはビューを左端に揃えます(.trailingは右端です)。spacing: 12は各ビューの間に12ポイントの間隔を設定します。

HStack は代わりに垂直方向に整列します:.top.center、または .bottom

HStack(alignment: .top, spacing: 20) {
    Text("Left")
    Text("Right")
}
challenge icon

チャレンジ

簡単

レシートがリストのように読めるように、VStackの配置を.leadingに設定し、間隔を12に設定します。

自分で試してみよう

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

SwiftUI入門のすべてのレッスン

自分で練習してみよう: Swiftプレイグラウンド