WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in SwiftUI

What's new in SwiftUI

SwiftUI & UI Frameworks
元の動画を見る

ハイライト

SwiftUI は、WWDC 2022 で Swift Charts、NavigationStack、NavigationSplitView、Layout プロトコル、Grid、ShareLink、PhotosPicker、Transferable および複数のコントロールの更新を追加し、チャート、ナビゲーション、レイアウト、共有、クロスプラットフォーム インタラクションをカバーします。

主要内容

SwiftUI の初期の共通の問題は、単純なインターフェイスは高速である一方で、複雑なアプリケーションではいくつかのタイプのギャップに遭遇することでした。チャートにはサードパーティのライブラリが必要で、ナビゲーション状態を保持するのが難しく、カスタム レイアウトは GeometryReader に依存し、共有、ドラッグ、写真の選択にはクロスフレーム スプライシングが必要でした。

2022 年の SwiftUI アップデートは、これらのギャップを埋めることに焦点を当てています。 Apple は宣言型 API を使用して、グラフ作成、ナビゲーション、レイアウト、共有、データ転送を同じモデルに組み込みます。開発者は依然としてビューとモディファイアを作成していますが、対象となるアプリケーション構造はより完全になっています。

この講演では、Party Planner の例を使用して更新内容をつなぎ合わせます。つまり、Swift Charts を使用して ToDo の進捗状況を表示し、新しいナビゲーション API を使用して階層を整理し、Grid と Layout を使用してカスタム配置を処理し、PhotosPicker、ShareLink、および Transferable を使用して写真、共有、ドラッグを処理します。

詳細

Swift Charts

(02:51) スイフトチャートChartコンテナとマークのタイプはチャートを説明します。BarMark、LineMark、RuleMarketc. マークは SwiftUI モディファイアと連動し、システムはローカリゼーション、ダイナミック タイプ、ダーク モード、およびアクセシビリティを処理します。

Chart(tasks) { task in
    BarMark(
        x: .value("Task", task.name),
        y: .value("Remaining", task.remainingCount)
    )
    .foregroundStyle(by: .value("Category", task.category))
}

重要なポイント: -Chart(tasks)モデルのコレクションを走査してグラフを生成する -BarMarkヒストグラムの単一マークを宣言します -xそしてy使用.valueセマンティックタグとデータをバインドする -foregroundStyle(by:)カテゴリごとに色分けを自動生成

データ駆動型ナビゲーション

（10:27）NavigationStack従来のスタック ナビゲーションを置き換えます。開発者は価値ベースのNavigationLink目的地を表現するには、次を使用します。navigationDestination登録された値をビューにマッピングします。ナビゲーション パスは配列に保存でき、状態を復元したり、ワンクリックでルート ページに戻ったりするのに適しています。

NavigationStack(path: $path) {
    List(tasks) { task in
        NavigationLink(value: task) {
            Text(task.name)
        }
    }
    .navigationDestination(for: PartyTask.self) { task in
        TaskDetail(task: task)
    }
}

重要なポイント: -path現在のナビゲーション スタックの状態を保存する -NavigationLink(value:)ターゲットビューを直接構築せずにモデル値を渡す -navigationDestination特定の種類の値に対応するページの統一定義 -変更path配列はプッシュ、ポップ、復元を制御できます

カスタムレイアウト

（22:02）Layoutプロトコルにより、カスタム レイアウトが SwiftUI の最上級の機能になります。以前は、GeometryReader は手動測定によく使用されていましたが、現在ではレイアウトに測定および配置ロジックを実装し、アニメーション機能を保持できるようになりました。

struct RadialLayout: Layout {
    func sizeThatFits(proposal: ProposedViewSize,
                      subviews: Subviews,
                      cache: inout ()) -> CGSize {
        proposal.replacingUnspecifiedDimensions()
    }

    func placeSubviews(in bounds: CGRect,
                       proposal: ProposedViewSize,
                       subviews: Subviews,
                       cache: inout ()) {
        for (index, subview) in subviews.enumerated() {
            let angle = Angle.degrees(Double(index) / Double(subviews.count) * 360)
            let point = CGPoint(x: bounds.midX + cos(angle.radians) * 120,
                                y: bounds.midY + sin(angle.radians) * 120)
            subview.place(at: point, anchor: .center, proposal: .unspecified)
        }
    }
}

重要なポイント: -Layout個別の測定と配置 -sizeThatFitsコンテナの必要なサイズを返します -placeSubviews各サブビューの位置を決定する -subview.place最終的な配置はレイアウト システムによって実行されます。

共有と転送

（24:45）PhotosPickerSwiftUI ネイティブのフォトピッカーを提供します。ユーザーが画像を選択すると、サンプルコードが渡されます。loadTransferable(type: Image.self)意思PhotosPickerItemSwiftUIとしてロードImage。

@Published var imageSelection: PhotosPickerItem? = nil {
    didSet {
        if let imageSelection = imageSelection {
            let progress = loadTransferable(from: imageSelection)
            imageState = .loading(progress)
        } else {
            imageState = .empty
        }
    }
}

private func loadTransferable(from imageSelection: PhotosPickerItem) -> Progress {
    return imageSelection.loadTransferable(type: Image.self) { result in
        DispatchQueue.main.async {
            guard imageSelection == self.imageSelection else { return }
            switch result {
            case .success(let image?):
                self.imageState = .success(image)
            case .success(nil):
                self.imageState = .empty
            case .failure(let error):
                self.imageState = .failure(error)
            }
        }
    }
}

重要なポイント: -imageSelectionユーザーを保存するPhotosPickerで選択されましたPhotosPickerItem

  • didSet選択が変更されるとロードを開始し、最初にステータスを に切り替えます。.loading(progress)
  • loadTransferable(type: Image.self)システム転送メカニズムを使用して、選択内容を次のようにロードします。Image
  • guard imageSelection == self.imageSelection新しい選択内容を上書きすることによる古い非同期結果を回避します。 -success、nilそしてfailureブランチはそれぞれ成功、空ステータス、エラーステータスで更新されます。

(25:51) 加工された写真は直接渡すことができます。ShareLink共有。スピーチでも示されました.dropDestination(payloadType: Image.self)、同じカテゴリImageデータはドラッグ＆ドロップで受信できます。

if let item = viewModel.processedImage {
    ShareLink(
        item: item, preview: SharePreview("Birthday Effects"))
}

重要なポイント: -processedImage共有エントリは存在する場合にのみ表示されます -ShareLink受け取って共有するitem

  • SharePreviewシステム共有パネルでプレビュー タイトルを設定する
  • ここでセッションコードを使用しますImage、例に現れていないカスタマイズは拡張しません。Transferable成し遂げる

重要ポイント

  • オペレーション ダッシュボードをネイティブ Swift チャートに変更: を使用しますChart、BarMark、LineMark販売、習慣的なパンチ、またはプロジェクトの進捗状況を紹介します。このシステムはアクセシビリティとテーマの適応を自動的に処理するため、軽量のサードパーティ チャート ライブラリの置き換えに適しています。

  • ナビゲーション状態を保存可能にする: 使用しますNavigationStack(path:)管理の詳細ページのパス。ユーザーがアプリケーションを再起動した後、最後に開いたプロジェクトの詳細に戻るか、ディープ リンクにパスを直接構築してマルチレベル ページにアクセスします。

  • ブランド レイアウトにレイアウトを使用: フォト ウォール、ダッシュボード、コースの進行状況に合わせてカスタマイズしたレイアウトを作成します。成し遂げるLayout最後に、GeometryReader が座標を指定しなくても、レイアウトは SwiftUI アニメーションに参加できます。

  • 共有とドラッグを Transferable と統合: カード、写真、メモのエントリを有効にしますTransferable。同じデータ モデルは、ShareLink、他のアプリへのドラッグ アンド ドロップ、コピー アンド ペーストもサポートしています。

関連セッション

コメント

GitHub Issues · utterances