Jetpack Compose Glimmer의 목록

해당 XR 기기
이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.
XR 기기 유형 알아보기 →
AI 글래스
XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 목록은 세로로 스크롤 가능한 UI 구성요소로, 표시되는 항목만 효율적으로 렌더링하며 AI 안경 앱에 특정 동작과 입력 호환성을 제공하도록 설계되었습니다. Jetpack Compose Glimmer는 VerticalList 및 ListItem 구성요소를 사용하여 이를 달성합니다.

그림 1. Jetpack Compose Glimmer의 다양한 목록 스타일의 예

VerticalList는 스크롤 가능한 세로 콘텐츠를 표시하는 Jetpack Compose Glimmer의 구성요소입니다. LazyColumn와 동일한 API 기능을 제공하지만 Jetpack Compose Glimmer 및 디스플레이가 있는 AI 안경에 맞게 특별히 최적화된 동작을 제공합니다.

Jetpack Compose Glimmer 목록에는 몇 가지 고유한 제약 조건이 있습니다.

  • 목록에는 뷰 내에 3개 이하의 항목만 표시해야 합니다.
  • 목록에 뷰에 맞지 않는 항목이 포함된 경우 목록의 경계 근처에 검은색 스크림이 사용됩니다.

예: 항목 3개가 있는 세로 목록 표시

다음 코드는 VerticalList 및 ListItem 구성요소를 사용하여 세 항목의 목록을 만드는 방법을 보여줍니다.

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

코드에 관한 핵심 사항

  • 목록에는 동적으로 생성된 세 개의 항목이 표시되며 각 항목은 ListItem입니다.
  • 각 ListItem는 맞춤설정할 수 있으며 아이콘을 추가할 수 있습니다.