このページは Cloud Translation API によって翻訳されました。

「リストと詳細」レイアウトを作成する

リスト / 詳細は、1 つのペインを表示するデュアルペインレイアウトで構成される UI パターンです。アイテムのリストが表示され、別のペインには選択したアイテムの詳細が表示されます選択します。

このパターンは、詳細な情報を提供するアプリケーションに特に有用です。大規模なコレクションの要素に関する情報（メールクライアントなど）メールのリストと各メールメッセージの詳細な内容が含まれます。リストと詳細は、アプリの分割など、重要度の低いパスにも使用できます。設定をカテゴリのリストに変換し、各カテゴリの設定を表示されます。

`ListDetailPaneScaffold` を使用して UI パターンを実装する

ListDetailPaneScaffold は、実装を簡素化するコンポーザブルです。リスト / 詳細パターン。リストと詳細のスキャフォールドは、リストペイン、詳細ペイン、オプションの追加ペインの 3 つのペインがあります。「 scaffold が画面スペースの計算を処理します。十分な画面サイズがリストペインの横に詳細ペインが表示されます。小画面の場合すると、スキャフォールドは自動的にリストまたは表示されます。

リストページの横に表示される詳細ペイン。 — **図 1.** 十分な画面サイズがある場合はリストペインの横に表示されます。

アイテムが選択されると、詳細ペインが画面全体に表示されます。 — **図 2.** 画面サイズが限られている場合は、詳細ペイン（アイテムが選択されているため）スペース全体を占有します。

依存関係の宣言

ListDetailPaneScaffold はマテリアル 3 アダプティブレイアウトの一部ですライブラリをご覧ください。

アプリには、次の 3 つの関連するマテリアル 3 ライブラリの依存関係を含める必要があります。

adaptive - 下位レベルの構成要素（HingeInfo など）および Posture
adaptive-layout - 次のようなアダプティブレイアウト ListDetailPaneScaffold と SupportingPaneScaffold
- adaptive-navigation - 内部と外部を移動するためのコンポーザブルペイン間

アプリまたはモジュールの build.gradle ファイルに依存関係を追加します。

Kotlin


implementation("androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12")
implementation("androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12")
implementation("androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12")

Groovy


implementation 'androidx.compose.material3.adaptive:adaptive:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-layout:1.0.0-alpha12'
implementation 'androidx.compose.material3.adaptive:adaptive-navigation:1.0.0-alpha12'

基本的な使用方法

ListDetailPaneScaffold を次のように実装します。

選択されるコンテンツを表すクラスを使用します。このクラス保存をサポートするには、Parcelable にする必要があります。選択したリストアイテムを復元できますkotlin-parcelize を使用するプラグインを使用してコードを生成します。
```
@Parcelize
class MyItem(val id: Int) : ParcelableSampleListDetailPaneScaffold.kt
```
次を使用して ThreePaneScaffoldNavigator を作成します: rememberListDetailPaneScaffoldNavigator を追加して BackHandler を追加します。この navigator は、リストペイン、詳細ペイン、追加ペインの間を移動するために使用します。方法ジェネリック型を宣言すると、ナビゲータは scaffold（つまり、どの MyItem が表示されているか）を指定します。この型は Parcelable であれば、状態はナビゲータによって保存および復元され、自動的に処理されます。「 BackHandler システムの「戻る」ジェスチャーまたは ] ボタンを離します。アプリの [戻る] ボタンの想定される動作は、 ListDetailPaneScaffold はウィンドウサイズと現在のスキャフォールドに依存するあります。ListDetailPaneScaffold が以前の方法に戻ることをサポートできる場合現在の状態では、canNavigateBack() は true になり、 BackHandler。
```
val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}SampleListDetailPaneScaffold.kt
```

scaffoldState を navigator から ListDetailPaneScaffold コンポーザブル。

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    // ...
)SampleListDetailPaneScaffold.kt

ListDetailPaneScaffold にリストペインの実装を指定します。 使用 AnimatedPane ナビゲーション中にデフォルトのペインアニメーションを適用します。次に、 ThreePaneScaffoldNavigatorすると、詳細ペインに移動します。 ListDetailPaneScaffoldRole.Detail を呼び出して、渡されたアイテムを表示します。

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                }
            )
        }
    },
    // ...
)SampleListDetailPaneScaffold.kt

ListDetailPaneScaffold に詳細ペインの実装を含めます。 ナビゲーションが完了すると、currentDestination には現在のペインペインに表示されているコンテンツを含むため、「 content プロパティの型は、元の remember 呼び出しで指定された型と同じです。（この例では MyItem）。これにより、どのデータでもプロパティにアクセスできます。表示する必要があります
```
ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane =
    // ...
    detailPane = {
        AnimatedPane {
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)SampleListDetailPaneScaffold.kt
```

上記の手順を実装すると、コードは次のようになります。

val navigator = rememberListDetailPaneScaffoldNavigator<MyItem>()

BackHandler(navigator.canNavigateBack()) {
    navigator.navigateBack()
}

ListDetailPaneScaffold(
    directive = navigator.scaffoldDirective,
    value = navigator.scaffoldValue,
    listPane = {
        AnimatedPane {
            MyList(
                onItemClick = { item ->
                    // Navigate to the detail pane with the passed item
                    navigator.navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                },
            )
        }
    },
    detailPane = {
        AnimatedPane {
            // Show the detail pane content if selected item is available
            navigator.currentDestination?.content?.let {
                MyDetails(it)
            }
        }
    },
)SampleListDetailPaneScaffold.kt

アダプティブナビゲーションを作成する

補助ペインレイアウトを作成する