Compose TopAppBar nestedScroll 적용하는 법

컴포즈로 작업중인 화면에서 아래와 같이 타이틀과 공지사항이 있는 부분이 스크롤 할 때 올라가도록 하고 싶어서 구글링을 해보니 TopAppBar에 nestedScroll을 적용하면 된다고 한다.

검색하여 나온 글 중에 간혹 NestedScrollConnection 인터페이스 구현체를 만들어 사용하라는 글도 있던데 TopAppBarDefaults의 exitUntilCollapsedScrollBehavior메서드를 사용하면 간단히 구현할 수 있는 것 같다. (다만 ExperimentalMaterial3Api이므로 어노테이션을 달아줘야 함.. 언제 없어질지 모르는거임)

구글링하여 찾은 글 중 좋은 예시가 있는데
https://www.droidcon.com/2022/12/19/creating-a-collapsing-topappbar-with-jetpack-compose/

이 링크대로 따라하면 의도한대로 nestedScroll을 적용할 수 있을 것이다









있을것이었을텐데....

아래는 링크에 있는 예제 코드이다...

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

Scaffold(
    topBar = {
        LargeTopAppBar(
            title = { Text(text = stringResource(id = R.string.title)) },
            navigationIcon = { NavigationIcon(navController = navController)},
            actions = { AboutActionIcon(navController) },
            scrollBehavior = scrollBehavior
        )
    },
    modifier = modifier.nestedScroll(scrollBehavior.nestedScrollConnection)
) { innerPadding ->
    LazyColumn(...)) {
      ...
    }
}

예제 코드대로 똑같이 따라해서 TopAppBar에 scrollBehavior를 넣어줬건만...
아무리 스크롤을 해도 TopAppBar가 들어가지를 않았다

그래서 코파일럿에 물어보니 LazyColumn에도 Modifier.nestedScroll에 scrollBehavior를 넣어줘야 했던것이다....!

왜 이 내용이 링크의 예제 코드에는 생략이 되었던것인가!
하지만 똘똘한 사람이라면 TopAppBar에 scrollBehavior를 넣었던것과 마찬가지로 스크롤을 하는 주체인 LazyColumn에도 scrollBehavior를 넣어볼 시도는 했지 않았을까 싶었다...
반대로 말하자면 내가 아무 생각 없이 코드를 복붙만 하려는 코드몽키였다는 것...

코파일럿의 답변대로 LazyColumn에 scrollBehavior를 넣어보니 다행히 잘 작동했다.

왜 영상이 업로드가 안뜨는지 모르겠지만... 이미지를 클릭하면 새탭에서 영상을 확인할 수 있다.

아래는 대략적인 예제 코드이다.

val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

Scaffold(
    topBar = {
        TopAppBar(
            scrollBehavior = scrollBehavior,
            modifier = Modifier
                .nestedScroll(scrollBehavior.nestedScrollConnection),
            title = { }
        )
    }
) { paddingValues ->
    LazyColumn (modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)) {
        items(items) { item ->
            CommunityListItem {
                onNavigateToPostDetail(0)
            }
            Spacer(modifier = Modifier.padding(vertical = 6.dp))
        }
    }
}

이런식으로 작성한다면 아마 의도한대로 스크롤을 할 때 topbar가 위로 들어가는 것을 확인할 수 있을 것이다.