[Jetpack Compose] 8. SnackBar, 코루틴

아래 영상을 보고 정리한 게시글입니다.

https://www.youtube.com/watch?v=0Udm6oKFj-o&list=PLxTmPHxRH3VV8lJq8WSlBAhmV52O2Lu7n&index=6 

---

SnackBar

팝업 메시지를 띄울 때 사용함

ToastMessage와 비슷함

 

Scaffold

머티리얼 디자인을 사용할 때는 Scaffold로 감싸서 사용함

머티리얼 디자인

• SnackBar
• FloatingButton
• and so on...

 

코루틴

showSnackBar 함수를 통해 snackBar를 나타냄

하지만 showSnackBar 함수는 suspend 함수임

=> 코루틴에서 실행을 해야 함

 

composable 안에서는 아주 간단하게 scope를 정의해서 쓸 수 있음

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

 

키보드

키보드를 내리고 싶을 땐 LocalSoftWare를 써주면 됨

하지만 아직 실험 버전이라 annotation을 붙여줘야 함

val keyboardController = LocalSoftwareKeyboardController.current

@OptIn(ExperimentalComposeUiApi::class)
@Preview(showBackground = true)
@Composable
fun TestView()

---

전체 코드

@OptIn(ExperimentalComposeUiApi::class)
@Preview(showBackground = true)
@Composable
fun TestView() {
    val (text, setValue) = remember {
        mutableStateOf("")
    }

    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    val keyboardController = LocalSoftwareKeyboardController.current

    Scaffold(
        scaffoldState = scaffoldState,
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            TextField(
                value = text,
                onValueChange = setValue,
            )
            Button(onClick = {
                keyboardController?.hide()
                scope.launch {
                    scaffoldState.snackbarHostState.showSnackbar("Hello ${text}")
                }
            }) {
                Text("클릭!!")
            }
        }
    }
}

---

결과물