Jetpack Compose-те сығылатын құралдар тақтасының әсерін қалай жасауға болады?

Jetpack Compose-те сығылатын (collapsing) құралдар тақтасын бірнеше тәсілмен жасауға болады:

1. LazyColumn немесе LazyListState қолдану арқылы айналмалы жағдайды бақылап, айналмалы орынға байланысты жоғарғы компоненттің биіктігін немесе мөлдірлігін өзгерту.

2. Мұндай әсерді жүзеге асыру үшін CollapsingToolbar және басқа компоненттерді ұсынатын Accompanist кітапханасын қолдану.

3. Айналмалы жағдаймен бірге Modifier.offset және Modifier.graphicsLayer қолдану арқылы панельдің сығылуын анимациялау.

Мысал ретінде LazyColumn қолдану арқылы және биіктігін өзгерту:

val scrollState = rememberLazyListState()
val toolbarHeight = 200.dp
val minToolbarHeight = 56.dp

val offset = minOf(scrollState.firstVisibleItemScrollOffset.toFloat(), with(LocalDensity.current) { (toolbarHeight - minToolbarHeight).toPx() })
val currentHeight = toolbarHeight - with(LocalDensity.current) { offset.toDp() }

Column {
    Box(
        Modifier
            .height(currentHeight)
            .fillMaxWidth()
            .background(Color.Blue)
    ) {
        Text("Құралдар тақтасы", Modifier.align(Alignment.Center), color = Color.White)
    }
    LazyColumn(state = scrollState) {
        items(100) { index ->
            Text("Элемент #$index", Modifier.padding(16.dp))
        }
    }
}

Бұл код тізімді айналдыруға байланысты панельдің биіктігін өзгертеді, сығылу әсерін жасайды.