SwiftUIコンテナの解説

SwiftUIコンテナの解説

SwiftUIのコンテナビューの機能について説明し、サブビューがコンテナによってどのように管理されるか理解するための枠組みを提供します。新しいAPIを利用してカスタムコンテナをビルドした後、コンテナのコンテンツをカスタマイズする修飾子を作成し、コンテナをさらにブラッシュアップしてアプリの魅力を高める方法をご紹介します。

関連する章
- 0:00 - Introduction
- 3:17 - Composition
- 10:42 - Sections
- 13:18 - Customization
- 16:52 - Next steps
リソース
関連ビデオ

WWDC23
- SwiftUIのパフォーマンスを解明
WWDC21
- SwiftUIの徹底解説
ダウンロード

こんにちは SwiftUIを担当しているMattです SwiftUIのカスタムコンテナビューの構築について説明します SwiftUIのAPIは豊富な機能を備えた様々なコンテナを提供します例えば Listコンテナビューがあります
コンテナビューはトレイリングビュービルダークロージャを使ってコンテンツをラップします
ビュービルダーではハードコーディングしたこのTextビューのリストのようにコンテンツを静的に定義できますコンテンツを動的に定義することもできます例えば ForEachビューを使ってデータからTextビューを生成できます
ビュービルダーは同じコンテナ内であらゆる種類のコンテンツを作成することをサポートしています一部のコンテナはより高度な機能もサポートしています例えば設定可能なヘッダとフッタを使ってコンテンツを個別のセクションにグループ化できますコンテンツをカスタマイズするコンテナ固有のモディファイアもありますこの例では行間に表示される区切り線を非表示にしていますこのビデオでは新しいAPIを使ってこのような機能をサポートするカスタムコンテナビューを作成する方法を説明します
最初に任意のコンテンツのコンポジションをサポートするカスタムコンテナを作成してその柔軟性を最大限に引き出す方法を説明します
またセクションのサポートを追加する方法を説明します
さらにカスタムモディファイアを定義してコンテナ内のコンテンツを装飾する方法を説明します
それぞれのトピックについて SwiftUIとそのAPI設計の基盤となる重要な概念も説明しますそれでは早速始めます・・・
これは何でしょう？
「What's New in SwiftUI」を担当する SommerとSamが WWDCを祝ってカラオケパーティーを開くそうです
出欠の返事に私が歌う曲を書く必要がありますが
どんな曲を選べばいいのかわかりませんこのようにピンチになったら私がいつも試すことがあります SwiftUIの宣言型APIのパワーと柔軟性を使って問題を解決することですこのビデオではカラオケにぴったりの曲を選ぶ中で役に立つと思われる作業を行っていきますこれは私が頼りにしているディスプレイボードです
カラオケの曲をいくつか選んでおきました
イニシャライザを使って曲のアイデアを Textビューにマップしますこのビューはボードにピンで固定したカードに表示されます
DisplayBoardの実装ではカスタムレイアウトを使用しボード上でカードをランダムに配置しますカード自体を構築するために入力データについて反復処理する ForEachビューを使っています各データ要素からコンテンツビューを生成し作成したカスタムCardViewでそのコンテンツビューをラップします
ここまでは順調ですが DisplayBoardコンテナによって私の創造性が制限されています単一のデータコレクションからしかカードを作成できませんコンテナがもっと柔軟になるようにサポートを追加してコンテンツ内のコンポジションの種類を増やすことができます
ただし最初にコンポジションの意味を理解することが重要です
このようなSwiftUI Listを考えてみます Samがすすめる曲のリストが表示されます
このListは DisplayBoardと同様にデータのコレクションで初期化されますただし SwiftUIでは他の方法でもリストを作成できます
例えば一連のビューを手作業で書き出して Listを作ることができます私の曲のアイデアリストではこのようになります
SwiftUIは様々な種類のコンテンツを一緒に作成するAPIを提供することでこの2つの手法のギャップを埋めます
例えば ForEachビューでデータ駆動型リストを書き直すことができますこれは以前と同じ機能をサポートしていますが ForEachビューはビュービルダー内でネストできます
このことが重要なのはビューだけを使って両方のListのコンテンツを定義しているからです
つまりそれらのビューを 1つの統合されたListにまとめてこれまでに集めた曲のアイデアをすべて表示できますこの統合されたListがコンポジションの例です
最初の3行はハードコーディングした Textビューを使って静的に定義し残りの行はデータを使って動的に生成していますすべて同じList内で実現しています
DisplayBoardコンテナでも柔軟なコンポジションをサポートしたいのですがそのためには実装を変更する必要があります
最初のステップではコンテナをリファクタリングしますそれにより 1つのビュービルダーのみを使って初期化されます
まず既存のデータ駆動型プロパティを単一の汎用のビュープロパティに置き換えます
ViewBuilder属性を追加するとデフォルトのイニシャライザはトレイリングビュービルダークロージャを使って自動的にコンテンツを構築します
次に新しいコンテンツビューを使用するようにビュー本体を更新しますそれにはForEach(subviewOf:)と呼ばれる新しいAPIを使います
この新しいForEachイニシャライザは単一のビュー値を入力として受け入れますそしてそれぞれのサブビューをトレイリングビュービルダーに渡しそれらのサブビューをカードビューなど別の種類のビューに変換できます
この新しい実装により先ほどの曲のアイデアリストを使って
同じコンテンツをDisplayBoardでラップし各Textビューをボード上のカードに変換できます
これは大きな改善ですが仕組みを理解することが大切です
実装に戻って新しいAPIを詳しく見てみます
ForEach(subviewOf:の
サブビューとは何でしょうか
サブビューは単に別のビューに含まれるビューのことですコンテンツにサブビューがいくつあるか調べてみましょう実はあらゆる素晴らしい問いの答えと同様に「場合によります」
コードの最上位レベルのビューについて考えると 4つあります 3つのTextビューと 1つのForEachビューです
しかし ForEachは単なる1つのビューではありませんデータから生成されるビューのコレクションを表します
この場合 9つのサブビューに解決されますそれぞれがSamのお気に入りの曲です
つまりこのDisplayBoardのコンテンツは合計12個の独立したサブビューに解決されますそれはボードに表示された 12枚のカードからも明らかです
また 12の行が表示されているリストの内容とも一致します
これらの2種類のサブビュー間の違いを理解することが重要です
DisplayBoardのコードにあるオレンジ色の枠で囲んだ 4つのサブビューは宣言されたサブビューと呼ばれます
一方青色の枠で囲んだ画面上のビューは解決されたサブビューと呼ばれますこれには手動で定義した 3つのTextビューと ForEachによって生成された 9つのTextビューが含まれます
SwiftUIの宣言型システムでは SwiftUIアプリの実行中に解決されたサブビューを生成するレシピを宣言されたサブビューで定義します
例えば ForEachビューは単独では特定の外観や動作を持たない宣言されたサブビューですむしろ ForEachビューの目的は解決されたサブビューのコレクションを生成することです
Groupビューは組み込みコンテナのもう1つの例で解決されたサブビューのコレクションを表します例えば 3つのTextビューのGroupは対応する3つのサブビューに解決されます
EmptyViewのように宣言されたサブビューの一部ではサブビューに解決されない場合があります
また if文の分岐などのように条件付きで異なる数のサブビューに解決される場合があります
新しいForEach(subviewOf:)APIはコンテンツの解決されたサブビューのみを反復処理で生成します
これによりより少ないコードを使ってコンテナでコンテンツの任意のコンポジションをサポートできますこれはそれらのサブビューがコード内でどのように宣言されているかに関係なく SwiftUIがサブビューの解決を処理してくれるからです
柔軟なコンポジションをサポートすると新しい曲をボードにとても簡単に追加できます
Samの曲に加え Sommerもお気に入りの曲をすすめてくれました別のForEachビューを使ってそれらの曲を追加できますこれはコンテナの実装に変更を加えることなく実現できます新しいアイデアの追加はとても簡単になりましたがすべてのカードを表示するのは困難ですこのことを解決するためにボードが一杯になってきたらカードのサイズを縮小しましょう
ボードに追加したカードが 15枚を超えたらカードのサイズを縮小しますカードの枚数を数えるために別の新しいAPIを使うことができます Group(subviewsOf:)と呼ばれこれで実装のForEachをラップします
ForEach(subviewOf:)APIと同様にこのビューはビューを入力として受け取りサブビューを解決します
ただし 1つずつ反復するのではなく Group(subviewsOf:)APIはすべての解決されたサブビューのコレクションを返します
このコレクションに対して countプロパティを使ってカードの総数を確認します 15枚以上ある場合は小さいサイズを使うよう CardViewを設定します
アプリに戻るとサイズが小さいためカードがあまり重なりませんこれでカードが読みやすくなりましたがボードはまだ少し雑然としています
そこで次はセクションのサポートを追加して整理します
Listはセクションをサポートする組み込みコンテナの一例で SwiftUIのSectionビューを使います Sectionビューの動作は Groupビューとよく似ていますがオプションのヘッダやフッタなどセクション固有のメタデータがあります
私のディスプレイボードの目標は各自のお気に入りの曲について個別のセクションを作ることです
ただしカスタムコンテナはデフォルトでセクションをサポートしていないため追加の作業を行ってセクションを有効にします
これは私が考えているデザインのスケッチですボードをセクションごとに縦の列に分割し一番上にヘッダを表示します
私の実装ではまず既存のカードレイアウトのコードを独自のビューに分離します
個別のセクション内でカードを配置する際にこのビューを再利用します
次にセクションコンテンツを水平スタックでラップしボードを列に分割します列を作るにはディスプレイボードのコンテンツ内にある Sectionビューの情報にアクセスする必要がありますそのために ForEachのもう1つの新しいAPIを使用できます
これはForEach(sectionOf:)と呼ばれ ForEach(subviewOf:)と同じように機能しビューインスタンスを入力として受け取ります
ただしこのバージョンではビュー内で検出した各セクションについて反復を行いセクション設定をビュービルダーに提供します
各セクションにはそのコンテンツビューのプロパティがありカードを配置するために先ほど作成したヘルパービューにそれを渡すことができます
さらに各セクションにカスタムの背景を追加しセクションを見分けやすくします
アプリをもう一度実行するとカードが前よりも整理され各セクションが別の列に配置されています次にセクションヘッダを表示するためのサポートを追加します
まず各セクションをVStackでラップしヘッダとコンテンツの両方を含めます
次にif文を使ってセクションにヘッダがあるかどうかを確認しますここでisEmptyプロパティを使いますこれは解決されたサブビューがヘッダに含まれているかどうかを返します
ヘッダが存在する場合先ほど作成したカスタムヘッダカードにそれを表示します
ボードを見ると各セクションの上に該当するヘッダカードが表示されています
ただし曲選びを進めるためにボツの曲に線を引く必要がありますそのためにコンテナのコンテンツをカスタマイズするサポートを追加します
ビデオの冒頭で .listRowSeparator()モディファイアを使った例を示しましたこのモディファイアは List内のビューに適用されますが行間に区切り線を描画するかどうかを決定する動作は List自体に実装します
私のディスプレイボードで特定の曲をボツにする場合にカードに線を引く動作をサポートしましょう
新しいAPIを使ってこのような種類のコンテナ固有のモディファイアを構築できますこれらのモディファイアはコンテナ値と呼ばれますコンテナ値は新しい種類のキー付きストレージで EnvironmentやPreferenceと概念が似ています
環境値はビュー階層全体で上から下に渡されます
Preferenceでは含まれているすべてのビューについてビュー階層全体で下から上へ値を渡します
解決されたサブビューのコンテナ値はその上位のコンテナからしかアクセスできないためコンテナ固有のカスタマイズオプションを実装するのに最適なツールです
私のディスプレイボードではコンテナ値を使ってカードに線を引くカスタムのビューモディファイアを作成します新しい種類のコンテナ値の定義に必要なコードはわずか数行です
まず ContainerValues型の Extensionを作成しますこれはSwiftUIの新しい型です
Extension内で新しいEntryマクロを使ってプロパティを宣言しますこのマクロにはカードが却下されたかどうかを追跡するブール値が格納されます
Entryマクロは新しいAPIであり SwiftUIのキー付きストレージ型に環境値やフォーカス値などの新しい値を追加するのに便利な構文を提供します
次にプロパティの設定を容易にするためにカスタムビューモディファイアを宣言しますこれは新しいcontainerValue() API モディファイアを呼び出しプロパティのキーパスと新しく設定する値を渡します
次にコンテナ内に新しいコンテナ値のサポートを追加しますセクションの実装でカードのコンテンツが却下されたかどうかに応じて各カードビューをカスタマイズする必要がありますそのために新しいcontainerValues プロパティを使用しますコンテナ値は解決されたサブビューとセクションの両方から読み取りできます
カスタム値を CardViewのisRejectedパラメータに渡しますこれによりカードが却下された場合カスタムの装飾が表示されます
新しいモディファイアを使うことでいよいよいくつかの曲をボツにできます
まず「Scrolling in the Deep」は大好きな曲ですがカラオケでその音域の声を出せるかどうかわかりません
ボード上でそのカードに指で線を引くと大きな赤い斜線が表示されます
Samはいくつかの曲を自分で歌うそうなのでそれらも却下します
Sommerが何を歌うつもりかわかりません念のため彼女のセクションはすべて却下しましょう
セクション全体にモディファイアを適用するとその全サブビューが同じ値に設定されます
つまり右側のSommerのすべての曲に線が引かれます
カラオケにぴったりの曲を見つける作業がかなり前進しましたが最終決定を行う必要があります私の曲選びはまだ続きますがこれらの新しいAPIを試してみてください
ForEachとGroupで新しいイニシャライザを使うと解決されたサブビューやビューのセクションについて反復と変換を行うことができますカスタムコンテナの設計上可能な場合はセクションのサポートを追加しましょうコンテナでセクションを使う意味がない場合も問題ありませんセクションサポートの追加はオプションです
最後にコンテナ値を使って個々のコンテンツのカスタマイズや装飾を行いましょう
これらの新しいAPIのおかげで残りの数曲に絞り込むことができました
今気づきましたまだ検討していない曲が1曲ありますそれが探していた曲かも知れません
ホイットニー・Viewストンの「I Will Always Subview」です
ここで私がやるべきことは SommerとSamに出欠の返事を返してこのセッションを終わらせることですなぜなら本当に曲の練習を始めなければならないからです！またお会いしましょう

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")
}

0:36 - SwiftUI Lists

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(otherSongs) { song in
    Text(song.title)
  }
}

0:54 - SwiftUI Lists

List {
  Section("Favorite Songs") {
    Text("Scrolling in the Deep")
    Text("Born to Build & Run")
    Text("Some Body Like View")
  }

  Section("Other Songs") {
    ForEach(otherSongs) { song in
      Text(song.title)
    }
  }
}

1:00 - SwiftUI Lists

List {
  Section("Favorite Songs") {
    Text("Scrolling in the Deep")
    Text("Born to Build & Run")
    Text("Some Body Like View")
  }

  Section("Other Songs") {
    ForEach(otherSongs) { song in
      Text(song.title)
        .listRowSeparator(.hidden)
    }
  }
}

2:35 - Data-driven DisplayBoard

@State private var songs: [Song] = [
  Song("Scrolling in the Deep"),
  Song("Born to Build & Run"),
  Song("Some Body Like View"),
]

var body: some View {
  DisplayBoard(songs) { song in
    Text(song.title)
  }
}

2:47 - DisplayBoard implementation

// Insert code snvar data: Data
@ViewBuilder var content: (Data.Element) -> Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(data) { item in
      CardView {
        content(item)
      }
    }
  }
  .background { BoardBackgroundView() }
}

3:08 - Data-driven DisplayBoard

@State private var songs: [Song] = [
  Song("Scrolling in the Deep"),
  Song("Born to Build & Run"),
  Song("Some Body Like View"),
]

var body: some View {
  DisplayBoard(songs) { song in
    Text(song.title)
  }
}

3:30 - List composition

List(songsFromSam) { song in
  Text(song.title)
}

3:46 - List composition

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")
}

3:56 - List composition

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")
}

List(songsFromSam) { song in
  Text(song.title)
}

4:05 - List composition

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")
}

List {
  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

4:24 - List composition

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

4:59 - DisplayBoard implementation

var data: Data
@ViewBuilder var content: (Data.Element) -> Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(data) { item in
      CardView {
        content(item)
      }
    }
  }
  .background { BoardBackgroundView() }
}

5:15 - DisplayBoard implementation

// DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(data) { item in
      CardView {
        content(item)
      }
    }
  }
  .background { BoardBackgroundView() }
}

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")
}

DisplayBoard {
  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

5:27 - DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(subviewOf: content) { subview in
      CardView {
        subview
      }
    }
  }
  .background { BoardBackgroundView() }
}

5:52 - List composition

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

5:57 - DisplayBoard composition

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

6:12 - DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(subviewOf: content) { subview in
      CardView {
        subview
      }
    }
  }
  .background { BoardBackgroundView() }
}

6:23 - DisplayBoard subviews

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

6:36 - Declared vs. resolved views

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

// 3 resolved subviews
Text("Scrolling in the Deep")
Text("Born to Build & Run")
Text("Some Body Like View")

// 9 resolved subviews
Text("I Container Multitudes")
…
Text("Love Stack")

7:11 - List subviews

List {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

7:19 - Declared vs. resolved views

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

// 3 resolved subviews
Text("Scrolling in the Deep")
Text("Born to Build & Run")
Text("Some Body Like View")

// 9 resolved subviews
Text("I Container Multitudes")
…
Text("Love Stack")

8:00 - Resolved ForEach

// 1 declared view
ForEach(songsFromSam) { song in
  Text(song.title)
}

// 9 resolved subviews
Text("I Container Multitudes")
…
Text("Love Stack")

8:16 - Resolved Group

// 1 declared view
Group {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")
}

// 3 resolved subviews
Text("Scrolling in the Deep")

Text("Born to Build & Run")

Text("Some Body Like View")

8:32 - Resolved EmptyView

// 1 declared view
EmptyView()	

// Zero resolved subviews

8:39 - Resolved if expression
```
// Insert code snippet.
```

8:48 - DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(subviewOf: content) { subview in
      CardView {
        subview
      }
    }
  }
  .background { BoardBackgroundView() }
}

9:11 - DisplayBoard composition

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }
}

9:17 - DisplayBoard composition

DisplayBoard {
  Text("Scrolling in the Deep")
  Text("Born to Build & Run")
  Text("Some Body Like View")

  ForEach(songsFromSam) { song in
    Text(song.title)
  }

  ForEach(songsFromSommer) { song in
    Text(song.title)
  }
}

9:44 - DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    ForEach(subviewOf: content) { subview in
      CardView {
        subview
      }
    }
  }
  .background { BoardBackgroundView() }
}

9:55 - DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    Group(subviewsOf: content) { subviews in
      ForEach(subviews) { subview in
        CardView {
          subview
        }
      }
    }
  }
  .background { BoardBackgroundView() }
}

10:19 - DisplayBoard implementation

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    Group(subviewsOf: content) { subviews in
      ForEach(subviews) { subview in
        CardView(
          scale: subviews.count > 15 ? .small : .normal
        ) {
          subview
        }
      }
    }
  }
  .background { BoardBackgroundView() }
}

10:47 - List sections

List {
  Section("Favorite Songs") {
    Text("Scrolling in the Deep")
    Text("Born to Build & Run")
    Text("Some Body Like View")
  }

  Section("Other Songs") {
    ForEach(otherSongs) { song in
      Text(song.title)
    }
  }
}

11:03 - DisplayBoard sections

DisplayBoard {
  Section("Matt's Favorites") {
    Text("Scrolling in the Deep")
    Text("Born to Build & Run")
    Text("Some Body Like View")
  }
  Section("Sam's Favorites") {
    ForEach(songsFromSam) { song in
      Text(song.title)
    }
  }
  Section("Sommer's Favorites") {
    ForEach(songsFromSommer) { song in
      Text(song.title)
    }
  }
}

11:26 - Implementing DisplayBoard sections

DisplayBoard sections
@ViewBuilder var content: Content

var body: some View {
  DisplayBoardCardLayout {
    Group(subviewsOf: content) { subviews in
      ForEach(subviews) { subview in
        CardView(
          scale: subviews.count > 15 ? .small : .normal
        ) {
          subview
        }
      }
    }
  }
  .background { BoardBackgroundView() }
}

11:35 - Implementing DisplayBoard sections

@ViewBuilder var content: Content

var body: some View {
  DisplayBoardSectionContent {
    content
  }
  .background { BoardBackgroundView() }
}

struct DisplayBoardSectionContent<Content: View>: View {
  @ViewBuilder var content: Content
  ...
}

11:42 - Implementing DisplayBoard sections

@ViewBuilder var content: Content

var body: some View {
  HStack(spacing: 80) {
    ForEach(sectionOf: content) { section in
      DisplayBoardSectionContent {
        section.content
      }
    }
  }
  .background { BoardBackgroundView() }
}

12:48 - Implementing DisplayBoard section headers

@ViewBuilder var content: Content

var body: some View {
  HStack(spacing: 80) {
    ForEach(sectionOf: content) { section in
      VStack(spacing: 20) {
        if !section.header.isEmpty {
          DisplayBoardSectionHeaderCard { section.header }
        } 
        DisplayBoardSectionContent {
          section.content
        }
        .background { BoardSectionBackgroundView() }
      }
    }
  }
  .background { BoardBackgroundView() }
}

13:30 - List customization

List {
  Section("Favorite Songs") {
    Text("Scrolling in the Deep")
    Text("Born to Build & Run")
    Text("Some Body Like View")
  }

  Section("Other Songs") {
    ForEach(otherSongs) { song in
      Text(song.title)
        .listRowSeparator(.hidden)
    }
  }
}

14:46 - Custom container values

extension ContainerValues {
  @Entry var isDisplayBoardCardRejected: Bool = false
}

extension View {
  func displayBoardCardRejected(_ isRejected: Bool) -> some View {
    containerValue(\.isDisplayBoardCardRejected, isRejected)
  }
}

15:42 - Implementing DisplayBoard customization

struct DisplayBoardSectionContent<Content: View>: View {
  @ViewBuilder var content: Content

  var body: some View {
    DisplayBoardCardLayout {
      Group(subviewsOf: content) { subviews in
        ForEach(subviews) { subview in
          let values = subview.containerValues
          CardView(
            scale: (subviews.count > 15) ? .small : .normal,
            isRejected: values.isDisplayBoardCardRejected
          ) {
            subview
          }
        }
      }
    }
  }
}

16:15 - DisplayBoard customization

DisplayBoard {
  Section("Matt's Favorites") {
    Text("Scrolling in the Deep")
      .displayBoardCardRejected(true)
    Text("Born to Build & Run")
    Text("Some Body Like View")
  }
  Section("Sam's Favorites") {
    ForEach(songsFromSam) { song in
      Text(song.title)
        .displayBoardCardRejected(song.samHasDibs)
    }
  }
  Section("Sommer's Favorites") {
    ForEach(songsFromSommer) { Text($0.title) }}}
  }
  .displayBoardCardRejected(true)
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23

WWDC21