[안드로이드] Compose 바텀시트에서의 스크롤 문제

커스텀 BottomSheetDialogFragment 안에 ComposeView 를 선언하고 스크롤 가능한 리스트를 표출해야 할 때가 있습니다. 이 때 스크롤에 문제가 발생합니다. 아래로 스크롤 하면 바텀시트도 함께 내려가는 현상입니다.

필자는, 커스텀 BottomSheetDialogFragment 내에 검색을 위한 BasicTextField 를 상단에,  검색 결과를 표출하는 LazyColumn 을 하단에 배치하여 개발하면서 스크롤 문제 겪었습니다.

 

이 현상을 해결하기 위해선 rememberNestedScrollInteropConnection API 를 사용해야 합니다. 수정자에 API를 선언해 주기만 하면 쉽게 해결할 수 있습니다.

	open class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	findViewById<ComposeView>(R.id.compose_view).apply {
	setContent {
	val nestedScrollInterop = rememberNestedScrollInteropConnection()
	// Add the nested scroll connection to your top level @Composable element
	// using the nestedScroll modifier.
	LazyColumn(modifier = Modifier.nestedScroll(nestedScrollInterop)) {
	items(20) { item ->
	Box(
	modifier = Modifier
	.padding(16.dp)
	.height(56.dp)
	.fillMaxWidth()
	.background(Color.Gray),
	contentAlignment = Alignment.Center
	) {
	Text(item.toString())
	}
	}
	}
	}
	}
	}
	}

view raw NestedScrollExample.kt hosted with ❤ by GitHub

 

rememberNestedScrollInteropConnection API 는, 바텀시트, 액티비티 내에서 중첩 스크롤을 구현해야 할때 필수로 선언해야 합니다.

 

참고

https://developer.android.com/jetpack/compose/gestures#parent-view-child-compose