Jetpack Compose Glimmer의 목록

적용 가능한 XR 기기
이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.
XR 기기 유형 알아보기 →
디스플레이 글라스
XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 VerticalList은 표시되는 항목만 구성하고 배치하여 높은 성능을 유지한다는 점에서 Compose LazyColumn과 유사하게 작동합니다. 하지만 Jetpack Compose Glimmer의 경우 사용자가 터치 스크린이 아닌 터치패드를 사용하여 상호작용하는 디스플레이 글라스 컨트롤을 표시하기 위해 세로 목록이 빌드됩니다. 모바일 사용자는 언제든지 화면의 좌표를 탭할 수 있지만 디스플레이 안경을 착용한 사용자는 포커스가 있는 항목과만 상호작용할 수 있습니다.

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

포커스 동작 및 하위 항목

세로 목록은 포커스 기반 탐색을 자동으로 처리하도록 최적화되어 있습니다. 포커스와 스크롤이 별개인 경우가 많은 모바일 기기용 목록과 달리 세로 목록은 사용자가 터치패드로 스크롤할 때 하위 항목을 통해 포커스를 이동하여 두 가지를 조정합니다. 목록 자체는 포커스할 수 없으므로 사용자가 스크롤하는 동안 명확한 상호작용 지점을 갖도록 하위 요소의 포커스를 관리하고 요청합니다.

직접 터치 입력이 없으므로 세로 목록 내에 배치하는 모든 하위 항목을 포커스 가능하게 만들고 항목에 포커스가 있을 때 활성 테두리나 강조 표시와 같은 시각적 응답을 제공합니다. 사용자는 포커스할 수 없는 항목을 지나 스크롤할 수는 있지만 해당 항목과 상호작용할 수는 없습니다. 가능하면 항상 세로 목록 내에서 ListItem 또는 Card과 같은 기본 제공 구성요소를 사용하세요. 이러한 구성요소는 이미 포커스 가능하며 포커스 상태에 대한 시각적 피드백을 제공합니다.

예: 항목이 여러 개인 세로 목록

다음 코드는 항목 및 항목 DSL 메서드가 있는 세로 목록을 사용하여 항목 목록을 만드는 방법을 보여줍니다.

@Composable
fun VerticalListSample() {
    VerticalList {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

예: 제목 슬롯이 있는 세로 목록

Jetpack Compose Glimmer는 제목 슬롯이 포함된 세로 목록의 오버로드도 제공합니다. 포커스할 수 없는 제목 (일반적으로 TitleChip)은 상단 중앙에 정적으로 유지되고 목록 콘텐츠는 그 아래로 스크롤됩니다.

다음 코드는 제목 슬롯이 있는 세로 목록을 만듭니다.

@Composable
fun VerticalListWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    VerticalList(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}

프로그래매틱 목록 작업에 목록 상태 사용

ListState를 사용하여 firstVisibleItemIndex 및 firstVisibleItemScrollOffset 속성을 사용하여 스크롤 위치와 같은 목록 상태의 다양한 측면을 제어하고 관찰합니다.

rememberListState를 사용하여 이 상태를 호이스팅하면 scrollToItem 및 animateScrollToItem를 사용하여 프로그래매틱 방식으로 스크롤할 수 있습니다.