[코틀린 컴포즈] 뒤로가기 버튼이 있는 앱바 만들기

오늘은 뒤로가기 버튼이 있는 앱바를 만들어보자.
궁금해 하실 분들을 위해서 결과물을 미리 보여주겠다.

결과물

앱바

적용한 전체 화면

작성 코드

//BackNavAppBar.kt
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BackNavAppBar(appNavController : NavController, title : String) {
//NavController와 앱바 가운데에 들어갈 제목 데이터 받기
    CenterAlignedTopAppBar(
        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
            containerColor = Color.White,
            titleContentColor = Color.Black,
        ),
        title = {
            Text(
                text = title,
                color = Color.Black,
                fontWeight = FontWeight.Bold,
                style = MaterialTheme.typography.titleMedium
            )
        },
        navigationIcon = {
            IconButton(onClick = { appNavController.popBackStack() }) {
                Icon(
                    imageVector = Icons.Default.KeyboardArrowLeft,
                    contentDescription = null,
                    tint = Color.Black,
                    modifier = Modifier.size(32.dp)
                )
            }
        },
    )
}

//ChangePasswordScreen.kt
@OptIn(ExperimentalMaterial3Api::class, ExperimentalComposeUiApi::class)
@Composable
fun ChangePasswordScreen(appNavController : NavController) {
		//Scaffold를 이용해 앱바 배치
    Scaffold(
        topBar = { 
						//NavController와 앱바 가운데에 들어갈 제목 데이터 주기
            BackNavAppBar(appNavController,"비밀번호 변경") 
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
            .padding(innerPadding)
        ) {
            ChangePasswordForm(appNavController = appNavController)
        }
    }
}