[Android][Compose] Scaffold-topBar가 UI를 가리는 현상

Jetpack Compose 애니메이션 Codelab을 하던 중 AnimatedVisibility()이 보이지 않는 문제를 겪었다.

 

Codelab은 Material2를 기준으로 되어 있었고, 나는 Material3에 맞춰서 진행을 하고 있었는데 AnimatedVisibility가 화면에 표시되지 않았다. Codelab의 코드와 하나씩 비교를 해도 원인을 찾지 못하다가 AnimatedVisibility의 높이를 늘려보고 이유를 찾았다.

 

내가 직접 작성한 코드와 Codelab의 코드 중 차이점은 Material3를 사용하는가였는데, Material3의 경우 Scaffold에서 Modifier를 정의하지 않으면 내부 블록의 UI가 중첩되고 있었다.

(왼) Modifier 정의 안함 / (우) Modifier 정의 함

Modifer를 정의하는 대신 Scaffold-topBar에 Column Composable 함수로 랩핑 하는 것으로 해결할 수 있다.

Scaffold(
    topBar = {
        Column {
            HomeTabBar(
                backgroundColor = backgroundColor,
                tabPage = tabPage,
                onTabSelected = { tabPage = it }
            )
            EditMessage(editMessageShown)
        }
    },
    containerColor = backgroundColor,
    // ...
}