WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Inspectors in SwiftUI: Discover the details

Inspectors in SwiftUI: Discover the details

SwiftUIUI Frameworks
元の動画を見る

ハイライト

iOS 17、iPadOS 17、macOS Sonoma の新しい SwiftUIinspectorModifier を使用例すると、開発者は 1 行のコードでアダプティブ詳細パネルをアプリケーションに追加できます。パネルはワイド画面で右側のサイドバーとして表示され、コンパクトなサイズでサイズ変更可能なシートに自動的に変換され、列幅と表示ステータスのプログラム制御をサポートします。

主な内容

インスペクターとは何ですか?

Keynote の右側のパネルを見たことがあるはずです。図形を選択すると、右側に書式設定がポップアップ表示されます。 [ショートカット] では、使用例可能なアクションのライブラリが右側に表示されます。これらは検査官です。

（00:31）

以前は、開発者が自分で使用例する必要がありましたNavigationSplitViewまたは、スプレッドシートを手動で管理して、同様の効果を実現します。コードが複雑なだけでなく、さまざまなサイズの調整を自分で処理する必要があります。 iOS 17 以降、SwiftUI はネイティブを提供しますinspector修飾子。すべて 1 行のコードで実行されます。

（01:51）

配置が外観を決定します

インスペクターの動作は、ビュー階層内の位置によって異なります。つけるNavigationStack内部に配置すると、ナビゲーション バーの下に表示されます。外部に配置すると、柱の高さ全体が占有されます。

（06:01）

ツールバーの位置も特殊です。インスペクターのビュービルダーで宣言されたツールバーは、インスペクターの上のツールバー領域に表示されます。外部で宣言されたツールバーはメインコンテンツのツールバーに表示されます。インスペクターがシート形式で表示される場合、内部で宣言されたツールバーがシート内に続きます。

（06:44）

シート表示のカスタマイズ

iOS 16.4で導入されたシートカスタムモディファイアは、インスペクターと組み合わせて使用例​​できます。背景マテリアルを設定し、複数の高さレベルを定義し、背景コンテンツの相互作用を制御できます。

（09:37）

たとえば、インスペクターをコンパクト モードでシートとして表示する場合、高さが小さいと背景のコンテンツがブロックされませんが、マスクは中程度の高さに拡張された後に表示されます。これは 2 つの修飾子だけで実現できます。

（11:58）

＃＃詳細

基本的な使い方

struct ContentView: View {
    @State private var state = AppState()
    @State private var presented = true

    var body: some View {
        AnimalTable(state: $state)
            .inspector(isPresented: $presented) {
                AnimalInspectorForm(animal: $state.binding())
                    .inspectorColumnWidth(
                        min: 200, ideal: 300, max: 400)
                    .toolbar {
                        Spacer()
                        Button {
                            presented.toggle()
                        } label: {
                            Label("Toggle Inspector", systemImage: "info.circle")
                        }
                    }
            }
    }
}

（03:54）

キーポイント:

  • .inspector(isPresented:)を受け取るBinding<Bool>制御表示ステータス
  • インスペクターの内容は、末尾のクロージャーで定義されます。 -.inspectorColumnWidth(min:ideal:max:)列幅の範囲を設定します。ideal初回起動時の幅です。ユーザーが調整した後も永続的になります。
  • Inspector によって内部的に宣言される.toolbarインスペクターの上のツールバー領域に表示されます
  • インスペクターはデフォルトでグループ化されたフォーム スタイルを使用例するため、手動で設定する必要はありません
struct Example1: View {
    @State private var state = AppState()

    var body: some View {
        NavigationStack {
            AnimalTable(state: $state)
                .inspector(isPresented: $state.inspectorPresented) {
                    AnimalInspectorForm(animal: $state.binding())
                }
                .toolbar {
                    Button {
                        state.inspectorPresented.toggle()
                    } label: {
                        Label("Toggle Inspector", systemImage: "info.circle")
                    }
                }
        }
    }
}

（07:14）

キーポイント:

  • 検査官の場所NavigationStack内部では、ナビゲーション バーの下 (ツールバー スタイルの下) に表示されます。
  • ツールバーはメインコンテンツ上で宣言され、ナビゲーションスタックのツールバーに表示されます
  • コンパクトなサイズでは、インスペクターはシートとしてレンダリングされ、ツールバー ボタンはメイン コンテンツ ツールバーに残ります。
struct Example2: View {
    @State private var state = AppState()

    var body: some View {
        NavigationStack {
            AnimalTable(state: $state)
        }
        .inspector(isPresented: $state.inspectorPresented) {
            AnimalInspectorForm(animal: $state.binding())
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        HStack {
                            Button {
                            } label: {
                                Image(systemName: "rectangle.and.pencil.and.ellipsis")
                            }
                            Button {
                            } label: {
                                Image(systemName: "pawprint.circle")
                            }
                        }
                    }
                }
        }
    }
}

（07:55）

キーポイント:

  • 検査官の場所NavigationStack外部の場合、列の高さ全体を占有します (フルハイト スタイル)
  • ツールバーはインスペクターのビュービルダーで宣言され、インスペクターの上の専用ツールバー領域に表示されます。
  • コンパクトなサイズのシートとして表示される場合、ツールバーのコンテンツはシートに追従します
// 方式一：放在 detail column 内部
NavigationSplitView {
    Sidebar()
} detail: {
    AnimalTable()
        .inspector(presented: $isPresented) {
            AnimalInspectorForm()
        }
}

// 方式二：放在 NavigationSplitView 外部
NavigationSplitView {
    Sidebar()
} detail: {
    AnimalTable()
}
.inspector(presented: $isPresented) {
    AnimalInspectorForm()
}

（08:56）

キーポイント:

  • 存在するNavigationSplitView、インスペクターは詳細列の内側または分割ビュー全体の外側に配置できます。
  • どちらの配置方法も有効です。選択は、インスペクタをナビゲーション構造のどのレベルに関連付けるかによって異なります。

Sheet と組み合わせてカスタマイズを表示

.sheet(item: $nibbledFruit) { fruit in
    FruitNibbleBulletin(fruit: fruit)
        .presentationBackground(.thinMaterial)
        .presentationDetents([.height(200), .medium, .large])
        .presentationBackgroundInteraction(.enabled(upThrough: .height(200)))
}

（09:49）

キーポイント:

  • .presentationBackground(.thinMaterial)シートの背景を半透明の素材に設定して、下のコンテンツがうっすら見えるようにします。 -.presentationDetents([.height(200), .medium, .large])3 つの高さレベルを定義する -.presentationBackgroundInteraction(.enabled(upThrough: .height(200)))高さ 200 で背景コンテンツとの対話を許可します。その上にマスクが表示されます。

これらの修飾子は、コンパクトなサイズでレンダリングされるインスペクターのシートにも適用されます。

.inspector(presented: $state.inspectorPresented) {
    AnimalInspectorForm(animal: $state.binding())
        .presentationDetents([.height(200), .medium, .large])
        .presentationBackgroundInteraction(.enabled(upThrough: .height(200)))
}

（11:58）

重要なポイント

1.任意の選択インターフェイスにインスペクターを追加

アプリにテーブル、リスト、またはグリッドがあり、ユーザーが行を選択した後に詳細を表示または編集する必要がある場合は、次を使用例します。.inspector手動で管理されたシートまたは分割ビューを置き換えます。プラットフォーム判定コードを記述することなく、iPhone、iPad、Mac に自動的に適応します。選択したビューに入口が追加されます.inspector(isPresented:)修飾子。

2. Inspector を補助パネルとして使用例する

ショートカットと同様に、インスペクターには、メイン コンテンツに関連するツール ギャラリーまたはプロパティ パネルを表示できます。たとえば、コード エディタでは、メイン領域はコードであり、インスペクタにはファイル アウトラインまたはプロパティ インスペクタが表示されます。入り口はツールコンテンツを入れることです.inspector末尾のクロージャでは、次を使用例します。inspectorColumnWidthデフォルトの幅を制御します。

3.シートを結合して階層化されたインタラクションをカスタマイズ

iPhone では、インスペクターはシートとして表示されます。使用例できます.presentationDetentsそして.presentationBackgroundInteraction階層的なインタラクションを実現: ユーザーは、高さが小さいときにメイン コンテンツの操作を継続し、拡張した後、集中編集モードに入ることができます。エントリ ポイントは、プレゼンテーション修飾子をインスペクター コンテンツに追加することです。

4.ツールバーの位置制御ボタンの所有権を使用例

インスペクター関連の操作ボタン (閉じる、その他のオプションなど) は、インスペクターのビュー ビルダーで宣言されているため、シート モードではシートのツールバーに表示されます。メインコンテンツのアクションボタンはメインビューで宣言されます。入り口は綿密に計画されています.toolbarモディファイアの位置。

関連セッション

コメント

GitHub Issues · utterances