Introduction to SwiftUI

ハイライト

Apple は Sandwiches の例を使用して、iOS、iPadOS、macOS 用のユニバーサル SwiftUI アプリを最初から構築し、ビューの構成、信頼できる情報源、@State、@StateObject、リスト編集、アニメーション、Xcode プレビューを宣言型開発プロセスに組み込みます。

主要内容

多くの入門 UI チュートリアルはコントロールのリストから始まります。このセッションの方法はより簡単です。Xcode を開き、新しいマルチプラットフォーム プロジェクトを作成し、サンドイッチを段階的に記録するアプリを構築します。開発者はまずコードとキャンバスが同時に更新されることを確認し、次にリスト、ナビゲーション、詳細ページ、状態、アニメーション、データ モデル、およびプレビューがどのように同じ線に接続されているかを確認します。

従来の UI 開発では、ビュー オブジェクトが多くの責任を負いすぎることがよくあります。開発者は、オブジェクトの作成、プロパティの設定、イベントへの応答、ナビゲーションとリストの状態の維持、更新タイミングの手動処理を行う必要があります。 SwiftUI のエントリ ポイントは、インターフェイスを値として書き込むことです。body現在のデータが表示するインターフェイスを記述します。フレームワークは、データが変更された後に新しい記述を取得します。

Sandwiches の例は、実際のアプリの基本的なスケルトンをカバーしているだけです。リストはハードコードされたセルから始まり、以下にアクセスします。Identifiableモデルの後はデータ駆動型リストになります。詳細ページで使用されています@State画像のスケーリングを制御します。ルートデータは静的配列からにアップグレードされます。ObservableObject; 最後に、プレビューを使用して、ダーク モード、ダイナミック フォント、アラビア語、および右から左へのレイアウトを確認します。

このセッションは、2020 年のすべての新しい SwiftUI API の概要を説明するものではありません。入門的なものです。まず、View が非常に軽いことを理解し、小さなコンポーネントを自由に分解してください。次に、真実の源を理解し、国家をどこに置くべきかを知る。そして最後に、Xcode プレビューをアプリの実行後の修復ツールとしてではなく、開発サイクルの一部として扱います。

詳細

View は軽量の値です

(17:18) Kyle はプレゼンテーションを途中で一時停止し、SwiftUI View モデルを説明します。Viewと一致していますViewプロトコル構造体、継承されないUIViewこのような基本クラスは、フレームワークによって割り当てられた大量のストレージも所有しません。このフレームワークはビュー階層をレンダリングに適したデータ構造に折りたたむため、開発者はインターフェイスを単一目的の小さなビューに分割できます。

struct SandwichDetail: View {
    let sandwich: Sandwich

    var body: some View {
        Image(sandwich.imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

キーポイント:

• SandwichDetailが構造体である場合、保存される入力はsandwich。
• bodyはいViewプロトコルで必要な唯一の属性であり、インターフェイスの説明を返す役割を果たします。 -Image(sandwich.imageName)モデル内のイメージ名からイメージ ビューを作成します。 -.resizable()そして.aspectRatio(contentMode: .fit)デコレータの場合、新しいビューの説明を返します。
• このコードは公式スニペットからのものであり、以前にインポートされたセッションに依存しています。Sandwichモデル。

組み合わせにより視野が大きくなる

(18:30) SwiftUI の組み合わせ方法は、デモの前半と一致しています。VStackテキストを縦に配置し、HStack写真や文字を横に並べて、List複数行を折り返す、NavigationLink次に、セルを詳細ページに接続します。SandwichDetail同じパターンが にも見られます。ここでは、イメージ、ズーム、およびスケールのコントロールが新しいビューに結合されています。

struct SandwichDetail: View {
    let sandwich: Sandwich

    var body: some View {
        Image(sandwich.imageName)
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

キーポイント:

• Image、resizableそしてaspectRatioレンダリング中に詳細ページの画像領域を合成します。
• デコレーターは、新しいビューの記述の構築に参加し、後で既存のオブジェクトを変更するパスに従いません。
• いつbody再読み込みすると、SwiftUI は新しい説明を取得し、どのレンダリングを更新する必要があるかを決定します。
• このモデルでは、「サブビューの抽出」を低コストで再構築し、リストのセルを分割します。SandwichCellこの前提に基づいています。

@State国家を真実の源とする

(19:52) 詳細ページでは、画像を「fit」と「fill」の間で切り替える必要があります。 SwiftUI のアプローチは状態変数を宣言することですzoomed、もう一度みましょうaspectRatioのcontentModeこの状態から派生したもの。クリック ジェスチャは状態を変更するだけであり、インターフェイスの更新はフレームワークによって完了します。

struct SandwichDetail: View {
    let sandwich: Sandwich
    @State private var zoomed = false

    var body: some View {
        Image(sandwich.imageName)
            .resizable()
            .aspectRatio(contentMode: zoomed ? .fill : .fit)
            .onTapGesture { zoomed.toggle() }
    }
}

キーポイント:

• @State private var zoomed = falseそれは、このビュー自体が所有する真実の源です。 -contentModeは派生値であり、次によって与えられます。zoomed決める。 -.onTapGestureただ電話してくださいzoomed.toggle()は、画像オブジェクトを直接操作しません。
• SwiftUI が観察されましたbody読むzoomed、それでzoomed変更後再度リクエストしますbody。
• これはセッションで言われたことを説明しています:「考えられるすべての UI 状態は信頼できるデータから得られる」。

アニメーションと条件付きビューは依然としてデータ駆動型です

(31:31) 画像を拡大した後、デモが追加されましたignoresSafeArea、withAnimation、Label、Spacer、条件付きレンダリング、.transition(.move(edge: .bottom))。焦点は特定のコントロールではなく、同じルールにあります。つまり、状態を変更すると、SwiftUI は新しい状態に応じてビューを挿入、削除、または移動します。

Image(sandwich.imageName)
    .resizable()
    .aspectRatio(contentMode: zoomed ? .fill : .fit)
    .ignoresSafeArea(edges: .bottom)
    .onTapGesture {
        withAnimation {
            zoomed.toggle()
        }
    }

キーポイント:

• .ignoresSafeArea(edges: .bottom)下の安全領域を超えて画像を拡大するデモの手順に対応します。 -withAnimation状態の変更、アニメーション、最終状態をまとめてラップします。
• アニメーション中にユーザーがもう一度クリックしても、新しい状態は変わりません。zoomedその結果、フレームワークはアニメーションを反転または継続します。
• 後から激辛バナーを非表示にする場合、条件判定はチェックのみsandwich.isSpicyそしてzoomed、ビューのライフサイクルを手動で挿入および削除する必要はありません。

アプリレベルのデータの場合ObservableObjectアクセス

(42:55) リストはもともと静的配列によって駆動されていました。追加、削除、並べ替えをサポートするために、セッションはデータを可変ストアにアップグレードします。ストアは以下に準拠します。ObservableObject、変わりますsandwichesとしてマークされています@Published。アプリ入口用@StateObjectストアを持ち、リスト表示に使用されます@ObservedObject観察してください。

final class SandwichStore: ObservableObject {
    @Published var sandwiches: [Sandwich] = []
}

@main
struct SandwichesApp: App {
    @StateObject private var store = SandwichStore()

    var body: some Scene {
        WindowGroup {
            SandwichList(store: store)
        }
    }
}

struct SandwichList: View {
    @ObservedObject var store: SandwichStore

    var body: some View {
        List {
            ForEach(store.sandwiches) { sandwich in
                SandwichCell(sandwich: sandwich)
            }
            .onMove(perform: moveSandwiches)
            .onDelete(perform: deleteSandwiches)
        }
    }
}

キーポイント:

• ObservableObjectモデル オブジェクトがデータが変更されようとしていることを SwiftUI に通知できるようにします。 -@Published観察する必要があるプロパティをマークし、それらを使用してセッション内でサンドイッチ配列をラップします。 -@StateObjectアプリの入り口に配置し、アプリレベルのストアを持つのに適しています。 -@ObservedObjectリスト ビューに配置するということは、このビューが外部ストアを使用することを意味します。 -ForEach頼るSandwichに準拠するIdentifiable, これにより、SwiftUI は挿入、削除、または移動時に正しいリスト更新を合成できます。

プレビューも SwiftUI コードです

(49:36) 最後にプレビューの価値を示します。開発者はプレビューのコピーを作成し、動的タイプを増やすことができます。別のコピーを作成してダーク モードを設定します。次に、右から左へのレイアウトとアラビア語ロケールを設定します。 Xcode で追加されるのは、依然として SwiftUI デコレータです。

SandwichList(store: .test)
    .environment(\.sizeCategory, .accessibilityExtraExtraExtraLarge)

SandwichList(store: .test)
    .environment(\.colorScheme, .dark)

SandwichList(store: .test)
    .environment(\.layoutDirection, .rightToLeft)
    .environment(\.locale, Locale(identifier: "ar"))

キーポイント:

• .environmentコンテキスト情報をビュー階層全体に挿入します。
• ダイナミック タイプ、ダーク モード、レイアウト方向、ロケールはプレビューで個別にオーバーライドできます。 -Text文字列リテラルを使用する場合、SwiftUI はデフォルトでそれをローカライズ可能なテキストとして扱います。
• モデル内の文字列値は元の値に従って表示され、データ ソースのタイトルや名前などのコンテンツに適しています。
• セッションでは最後に、サンドイッチ アプリ全体の多くの動作が、最初に完全なビルドと実行を行わずにプレビューで検証されることが強調されました。

重要ポイント

1.プレビュー可能な詳細ページのズーム インタラクションを作成します。対処方法: 画像の詳細ページにクリックしてズームとズームを終了する機能を追加します。実行する価値がある理由: セッションはすでに使用されています@State、aspectRatioそしてwithAnimationこのタイプの相互作用は 1 つのブール状態だけを中心に展開できることを示します。開始方法: まず、画像の詳細ページを独立させます。View、声明@State private var zoomed = false、もう一度みましょうcontentModeバナーが表示されるかどうかは、zoomed派生。

2.クロスプラットフォーム チェックリスト アプリのプロトタイプを作成します。機能: 同じ SwiftUI リストと詳細ページを使用して、iPhone、iPad、macOS で実行します。実行する価値がある理由: デモでNavigationViewiPhone ではプッシュでき、iPad や macOS ではコラムに変えることができます。開始方法: マルチプラットフォーム テンプレートを使用してプロジェクトを作成し、共有モデルを共有グループに配置し、リストを最初の列として使用して、NavigationViewプレースホルダーの詳細ビューを追加します。

3.編集可能なデータリストを作成します。対処方法: ユーザーが項目を追加、削除、再配置できるようにします。実行する価値がある理由: セッションの使用ObservableObject、@Published、ForEach、onMoveそしてonDelete完全なデータ フローが示されています。開始方法: まずモデルを以下に準拠させます。Identifiable、その後、アプリの入り口で使用されるストアに配列を配置します。@StateObject保留、リストは通過@ObservedObject読み取り、modify メソッドを呼び出します。

4.一連の極限環境プレビューを作成します。対処法: 大きなフォント サイズ、ダーク モード、右から左へのレイアウト、ターゲット言語を同じプレビューでカバーします。実行する価値がある理由: 最後のデモでは、これらのシステム動作がキャンバスですぐに検証できることを示しています。開始方法: 主要なページの複数のプレビューを作成し、それらを個別に追加します.environment(\.sizeCategory, ...)、.environment(\.colorScheme, .dark)、.environment(\.layoutDirection, .rightToLeft)そして.environment(\.locale, ...)。

5.コンポーネントレベルのリファクタリング演習を実行します。対処方法: 大きなリスト セル、詳細ヘッダー、および下部のステータス バナーを独立したビューに分割します。実行する価値がある理由: SwiftUI View は非常に軽量であり、サブビューの抽出における実行時の負担がほとんどないことをセッションで明示しています。開始方法: Xcode の「Extract Subview」を使用して抽出します。SandwichCell、次に input 属性を使用してモデルを受け取り、その状態を実際にそのモデルを所有する親または現在のビューに残します。

関連セッション

• SwiftUI のアプリの要点 — アプリ、シーン、WindowGroup、およびマルチウィンドウ構造について引き続き説明し、この記事のエントリーレベルのアプリを完全な SwiftUI アプリケーションに拡張します。
• SwiftUI のデータの要点 — 徹底的な分解@State、@Binding、ObservableObject、@StateObjectそしてデータのライフサイクル。
• SwiftUI のスタック、グリッド、およびアウトライン — この記事のリスト部分の次のステップとして適した、List、ForEach、遅延読み込みスタック、グリッド、および階層データの表示に焦点を当てます。
• SwiftUI プレビュー用にアプリを構造化する — SwiftUI プレビューをより安定させてテストしやすくするために、入力、サンプル データ、データ フローを整理する方法について説明します。
• SwiftUI ビューを視覚的に編集する — Xcode キャンバス、プレビュー、およびビジュアル編集ワークフローについて引き続き説明します。