0Pricing
Swift Academy · レッスン

VStack、HStack、ZStackの基礎

スペースとアライメントを指定し、Viewを垂直・水平・奥行き方向に積み重ねます。

「VStack、HStack、ZStackの基礎」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwift Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Swift Academyコースには全4レッスンが含まれています。

ようこそ

`VStack`、`HStack`、`ZStack` は、SwiftUIにおける3つの基本的なレイアウトコンテナです。これらを理解することは、あらゆるインターフェースを構築するうえで不可欠です。

VStack — 垂直

```swift VStack(alignment: .leading, spacing: 8) { Text("Title").font(.title) Text("Subtitle").foregroundColor(.secondary) Button("Action") {} } ```

HStack — 水平

```swift HStack(spacing: 16) { Image(systemName: "star") Text("Favourite") Spacer() Text("4.9") } ```

ZStack — 奥行き

```swift ZStack(alignment: .bottomTrailing) { Image("background") Text("Overlay") .padding() .background(Color.black.opacity(0.5)) } ```

配置オプション

VStackの配置：`.leading`、`.center`、`.trailing` HStackの配置：`.top`、`.center`、`.bottom`、`.firstTextBaseline` ZStackの配置：水平方向と垂直方向を組み合わせた任意の `Alignment`

間隔パラメーター

```swift VStack(spacing: 0) { // no space between views Divider() Text("A") Divider() Text("B") } ```

スタックのネスト

```swift VStack { HStack { Image("icon"); Text("Name") } Text("Description") } ``` スタックは任意の深さでネストできるため、どのようなレイアウトでも実現できます。

Spacer

```swift HStack { Text("Left") Spacer() // pushes views to edges Text("Right") } ```

Divider

```swift VStack { Text("Above") Divider() // horizontal line Text("Below") } ```

パフォーマンス：GroupとStackの比較

子Viewが10個を超える場合は、Viewツリーの制限を避けるために `Group` でラップするか、`LazyVStack` に切り替えます。 ```swift ScrollView { LazyVStack { ForEach(items) { Text($0.name) } } } ```

確認問題

Viewを奥行き軸（前後方向）に沿って配置するStackはどれですか？

まとめ

主なポイント： • `VStack` — 垂直、`HStack` — 水平、`ZStack` — 奥行きです • `alignment:` と `spacing:` パラメーターを使います • `Spacer()` は隣接するViewを端へ押しやります • 複雑なレイアウトにはスタックをネストします • 大きなリストには `LazyVStack` / `LazyHStack` を使います 次はLazyVGridとLazyHGridです。

よくある質問

「VStack、HStack、ZStackの基礎」レッスンは無料ですか？

はい。「VStack、HStack、ZStackの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。

「VStack、HStack、ZStackの基礎」で何を学びますか？

スペースとアライメントを指定し、Viewを垂直・水平・奥行き方向に積み重ねます。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Swift Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「VStack、HStack、ZStackの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwift Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. VStack、HStack、ZStackの基礎
  2. LazyVGridとLazyHGrid
  3. Spacer、Padding、Frameモディファイア
  4. 適応型レイアウトのためのGeometryReader
← Swift Academyに戻る