Jetpack Compose에세 topBar가 하위 컴포지션을 가리는 문제 (간단)

본 글은 정확하지 않을 수 있습니다. 참고용으로만 봐주시면 감사하겠습니다.

 

 

문제 상태

다른 화면에서는 발생하지 않았던 문제가 위 화면에서는 발생하였다.

위 문제는 modifier에 대한 이해 부족으로 발생한 문제로 쉽게 해결할 수 있었다.

 

해결법

@Composable
fun MainScreen(
    modifier: Modifier = Modifier,
) {
    Scaffold(
        topBar = {
            MbitTopAppBar(
            	...
            )
        },
    ) { innerPadding ->
        MainBody(
            modifier = Modifier
                .padding(innerPadding)  // 패딩 전달
                .fillMaxSize()
        )
    }
}

@Composable
fun MainBody(
    modifier: Modifier = Modifier
) {

    LazyColumn(
    	modifier = modifier // !!! 추가 !!!
    ) {
        itemsIndexed(...) { index, data ->
            Card(...) {
                Row(...) {
                    Text(text = data)
                }
            }
        }
    }
}

 

TopAppBar와 LazyColumn이 겹치지 않도록 하려면 Scaffold에서 제공하는 innerPadding을 LazyColumn에 패딩으로 적용해야 한다. 이를 위해 ResultsByQuestionBody에서 받은 modifier를 LazyColumn에 전달하여 패딩을 적용해야 한다.