HStack

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

HStackはビューを左から右へ並べます：

HStack {
    Image(systemName: "sun.max.fill")
        .foregroundStyle(.yellow)
    Text("Sunny")
}

スタックはネストできます。一般的なレイアウトは、各行が HStack である VStack です。

VStack {
    HStack {
        Text("Coffee")
        Text("$3")
    }
    HStack {
        Text("Tea")
        Text("$2")
    }
}

チャレンジ

簡単

天気の行を作成します。cloud.sun.fillシンボルの後にテキストPartly cloudyを配置したHStackです。

自分で試してみよう

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

腕試し

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

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

1はじめに

4モディファイア

7リスト

10プロジェクト - Coddy Coffee

2コンテンツの表示

5状態とボタン

8ナビゲーション

11最終チャレンジ

3Stackとレイアウト

6ユーザー入力

9データの共有

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