Jetpack Compose Glimmer의 버튼

적용 가능한 XR 기기

이 가이드에서는 이러한 유형의 XR 기기를 위한 환경을 빌드하는 방법을 설명합니다.

XR 기기 유형 알아보기 →

XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 Button은 디스플레이 글라스 입력에 최적화된 대화형 구성요소로, 상태를 통해 명확한 시각적 피드백을 제공하여 사용자 작업을 안내합니다.

버튼은 테두리, 깊이와 같은 물리적 속성을 자동으로 처리하는 Jetpack Compose Glimmer 서피스 시스템을 기반으로 빌드됩니다.

표준 버튼에는 텍스트 라벨과 선택적 아이콘이 포함됩니다. 기본 또는 보조 작업에 사용할 수 있습니다. Jetpack Compose Glimmer에서 별도의 구성요소로 정의되는 아이콘 버튼, 전환 버튼과 같은 특수 버튼도 있습니다.

기본값

크게

분석

버튼은 컨테이너와 라벨로 구성되며, 선택적으로 선행 및 후행 아이콘이 있습니다.

크기

Jetpack Compose Glimmer 버튼은 두 가지 크기 변형을 지원합니다. 이는 최소 높이와 내부 패딩에 영향을 미칩니다.

주

Jetpack Compose Glimmer의 버튼은 상태를 전달하기 위해 모양을 변경합니다.

• 사용 설정됨: 대화형 버튼의 기본 상태입니다.
• 포커스됨: 포커스되면 버튼은 GlimmerTheme.depthEffectLevels.level1 및 포커스된 테두리 강조표시를 적용합니다.
• 눌림: 활성화되면 반투명 흰색 오버레이가 서피스에 적용됩니다.
• 사용 중지됨: 버튼이 입력에 응답하지 않으며 시각적 모양이 조정됩니다.

버튼 기본값

다음 기본값은 표준 버튼에 적용됩니다.

• 기본적으로 버튼은 GlimmerTheme.typography.bodySmall을 사용합니다. 버튼 내 텍스트가 간결하고 작업을 명확하게 설명하는지 확인하세요.
• 버튼의 기본 도형은 GlimmerTheme.shapes.large입니다. 일관된 라운딩은 사용자가 디스플레이 글라스 인터페이스에서 버튼을 식별하는 데 도움이 됩니다.

예: 텍스트 및 아이콘이 있는 버튼

기본 버튼에는 텍스트 라벨만 포함되지만 텍스트의 시작 부분 (leadingIcon 사용) 또는 끝부분 (trailingIcon 사용)에 아이콘을 추가하여 추가 컨텍스트를 제공할 수도 있습니다.

다음 코드는 선행 아이콘과 후행 아이콘이 모두 있는 버튼을 만듭니다.

Button(
    onClick = { /* Handle navigation or action */ },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = null) },
    trailingIcon = { Icon(SendIcon, contentDescription = null) }
) {
    Text("Text Label", style = GlimmerTheme.typography.titleSmall)
}
ButtonSamples.kt

버튼 그룹

ButtonGroup 구성 가능한 함수를 사용하면 버튼을 포커스 컨트롤러 역할을 하는 스크롤 가능한 행 으로 그룹화할 수 있습니다. 사용자가 스크롤하면 포커스가 자동으로 이동하여 현재 스크롤 위치에 해당하는 버튼을 강조표시합니다.

예: 버튼 그룹

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
ButtonSamples.kt

버튼 그룹의 포커스 제어

그룹의 버튼으로 포커스를 이동하여 선택을 수동으로 제어할 수 있습니다.

ButtonGroup 상태를 사용하여 스크롤 동작을 맞춤설정하고 제어합니다.

1. rememberButtonGroupState로 상태를 선언합니다.
2. ButtonGroup 구성 가능한 함수에 전달합니다.
3. animateScrollToItem (또는 즉시 스크롤하려면 scrollToItem)을 호출하여 특정 항목으로 스크롤하고 포커스를 자동으로 이동합니다.

다음 코드는 클릭 시 한 버튼에서 다른 버튼으로 포커스를 이동합니다.

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
ButtonSamples.kt