Jetpack Compose AlertDialog

기존에 Dialog를 사용하려면

Dialog 클래스 생성 AlertDialog.Builder 사용, DialogFragment 사용 등 괜시리 복잡하다.

Compose는 기존에 복잡한 UI 구조를 간단하게 만들어 사용할 수 있고 직관적이고 어렵지 않아서 좋다.

 

최초 Composition 발생 시 AlertDialog도 로딩된다.

State객체를 활용하여 AlertDialog를 보여줄지 말지 결정하면 된다.

소스는 직관적이라 따로 리딩할 것은 없고, 참고사항으로 onDismissRequest는 다이얼로그 외부영역 터치 시 동작하는 부분이다. 외부 터치 시 닫고 싶으면 State객체를 조작하면 된다.

 

@Composable
fun MainView() {
    Column {
        val showDialog = remember { mutableStateOf(false) }
        Button(onClick = { showDialog.value = true }) {
            Text(text = "AlertDialog 호출")
        }
        if (showDialog.value) {
            AlertDialog(onDismissRequest = {
                showDialog.value = false
            },
                confirmButton = {
                    Button(onClick = { showDialog.value = false }) {
                        Text(text = "확인")
                    }
                },
                title = {
                    Text(text = "타이틀")
                },
                text = {
                    Text(text = "내용입니다.")
                },
                dismissButton = {
                    Button(onClick = { showDialog.value = false }) {
                        Text(text = "취소")
                    }
                }
            )
        }
    }
}