Jetpack Compose BackHandler (= onBackPressed) 뒤로가기

안드로이드에서 기존에 뒤로가기 버튼을 눌렀을 때 동작을 커스텀하려면 onBackPressed() 메소드를 오버라이딩 해야 한다.

Jetpack Compose 에서는 어떻게 구현해야 할까?

BackHandler 라는 내장함수를 사용하면 된다.

BackHandler의 enabled 프로퍼티는 BackHandler를 활성화할지 여부를 결정한다.(기본값은 true)


BackHandler를 사용하여 다음과 같은 작업을 수행할수 있다.

- 뒤로가기 버튼을 사용하여 이전화면으로 돌아가기 / 종료하기

- 뒤로가기 버튼을 사용하여 작업을 취소하기

- 뒤로가기 버튼을 사용하여 특정 기능을 활성화 또는 비활성화 하기


BackHandler(enabled = true, onBack= {
    // 뒤로가기 버튼이 눌렸을때 수행할 작업을 정의
    ...
})
// 뒤로가기 두 번 눌렀을 때 앱 종료
@Composable
fun BackOnPressed() {
    val context = LocalContext.current
    var backPressedState by remember { mutableStateOf(true) }
    var backPressedTime = 0L

    BackHandler(enabled = backPressedState) {
        if(System.currentTimeMillis() - backPressedTime <= 400L) {
            // 앱 종료
            (context as Activity).finish()
        } else {
            backPressedState = true
            Toast.makeText(context, "한 번 더 누르시면 앱이 종료됩니다.", Toast.LENGTH_SHORT).show()
        }
        backPressedTime = System.currentTimeMillis()
    }
}
//특정 화면(screen)에서만 종료팝업 띄우기
@Composable
fun BackOnPressed2() {
    val exitDialog = remember { mutableStateOf(false) }

    BackHandler(enabled = (currentRoute(navController) == Screen.Home.route)) {
        exitDialog.value = true
    }

    ...
    
    if (exitDialog.value) {
        ExitAlertDialog(navController, {
            exitDialog.value = it
        }, {
            activity?.finish()
        })

    }
}
@Composable
fun ExitAlertDialog(navController: NavController, cancel: (isOpen: Boolean) -> Unit,  ok: () -> Unit) {
    val openDialog = remember { mutableStateOf(true) }
    if (currentRoute(navController = navController) == Screen.Home.route && openDialog.value) {
        AlertDialog(
            onDismissRequest = {
            },
            // below line is use to display title of our dialog
            // box and we are setting text color to white.
            title = {
                Text(
                    text = stringResource(R.string.close_the_app),
                    fontWeight = FontWeight.Bold,
                    fontSize = 18.sp
                )
            },
            text = {
                Text(text = stringResource(R.string.do_you_want_to_exit_the_app), fontSize = 16.sp)
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                        ok()
                    }) {
                    Text(
                        stringResource(R.string.yes),
                        fontWeight = FontWeight.Bold,
                        style = TextStyle(color = Color.Black)
                    )
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                        cancel(false)
                    }) {
                    Text(
                        stringResource(R.string.no),
                        fontWeight = FontWeight.Bold,
                        style = TextStyle(color = Color.Black)
                    )
                }
            },
        )
    }
}


댓글 없음:

댓글 쓰기

Jetpack Compose Composable의 Lifecycle

  이 페이지에서는 컴포저블의 수명 주기에 관해 알아보며 Compose에서 컴포저블에 재구성이 필요한지를 결정하는 방법을 살펴봅니다. 수명 주기 개요 상태 관리 문서 에 설명된 대로 컴포지션은 앱의 UI를 설명하고 컴포저블을 실행하여 생성됩니다. 컴포...