스낵바 구성요소는 화면 하단에 표시되는 간단한 알림 역할을 합니다. 사용자 환경을 방해하지 않으면서 작업이나 작업에 관한 피드백을 제공합니다. 스낵바는 몇 초 후에 사라집니다. 사용자는 버튼 탭하기와 같은 작업을 통해 알림을 닫을 수도 있습니다.
스낵바를 사용할 수 있는 다음 세 가지 사용 사례를 고려하세요.
- 작업 확인: 사용자가 이메일 또는 메시지를 삭제하면 작업을 확인하고 '실행취소' 옵션을 제공하는 스낵바가 표시됩니다.
- 네트워크 상태: 앱의 인터넷 연결이 끊기면 스낵바가 표시되어 현재 오프라인 상태임을 알립니다.
- 데이터 제출: 양식을 성공적으로 제출하거나 설정을 업데이트하면 스낵바에 변경사항이 성공적으로 저장되었다는 메시지가 표시됩니다.
기본 예시
스낵바를 구현하려면 먼저 SnackbarHostState
속성이 포함된 SnackbarHost
를 만듭니다. SnackbarHostState
는 스낵바를 표시하는 데 사용할 수 있는 showSnackbar()
함수에 대한 액세스 권한을 제공합니다.
이 정지 함수는 rememberCoroutineScope
를 사용하는 경우와 같이 CoroutineScope
가 필요하며 UI 이벤트에 응답하여 Scaffold
내에 Snackbar
를 표시할 수 있습니다.
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { snackbarHostState.showSnackbar("Snackbar") } } ) } ) { contentPadding -> // Screen content }
액션이 있는 스낵바
선택적 작업을 제공하고 Snackbar
의 지속 시간을 조정할 수 있습니다.
snackbarHostState.showSnackbar()
함수는 추가 actionLabel
및 duration
매개변수를 허용하고 SnackbarResult
를 반환합니다.
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { val result = snackbarHostState .showSnackbar( message = "Snackbar", actionLabel = "Action", // Defaults to SnackbarDuration.Short duration = SnackbarDuration.Indefinite ) when (result) { SnackbarResult.ActionPerformed -> { /* Handle snackbar action performed */ } SnackbarResult.Dismissed -> { /* Handle snackbar dismissed */ } } } } ) } ) { contentPadding -> // Screen content }
snackbarHost
매개변수를 사용하여 맞춤 Snackbar
를 제공할 수 있습니다. 자세한 내용은 SnackbarHost
API 참조 문서를 확인하세요.