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
fun ListItemSample() {
    ListItem { Text("This is a list item") }
}

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

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

@Composable
fun ListItemWithIconsSample() {
    ListItem(
        leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
        trailingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") }
    ) {
        Text("This is a list item with icons")
    }
}