Jetpack Compose Glimmer のリスト項目

対象となる XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
ディスプレイ メガネ
XR デバイスのタイプについて →

Jetpack Compose Glimmer では、ListItem は コンテンツの 1 行を表示するための標準コンポーネントです。リスト項目は、ディスプレイ メガネのフォーカスベースの操作用に設計されているため、フォーカスを取得するとビルトインの視覚的なレスポンスを提供します。

このコンポーネントには 2 つのオーバーロードがあります。1 つはアクションをトリガーする項目用の onClick パラメータ、もう 1 つはクリック操作を必要としない情報コンテンツ用のフォーカスのみ可能なバージョンです。

図 1.Jetpack Compose Glimmer で、リスト項目のスタイルが異なる 2 つのリストの例。

リスト内での使用

リスト項目は リスト 内の行の主な選択肢ですが、リストには Card や TitleChip などの他のコンポーネントをホストして、 さまざまな視覚的強調を提供することもできます。

リスト項目では、他の項目に使用される Card コンポーネントや TitleChip コンポーネントと揃えるために、メインテキストに headlineContent スロットを使用します。

例: サポート ラベルとアイコンを含むリスト項目

次のコードは、サポート ラベルと先頭と末尾の両方のアイコンを含むリスト項目を作成します。

@Composable
private fun ListItemWithSupportingLabelAndIcons() {
    ListItem(
        supportingLabel = { Text("Supporting Label") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        trailingIcon = { Icon(FavoriteIcon, "Localized description") },
    ) {
        Text("Primary Label")
    }
}