Jetpack Compose折叠工具栏 [英] Jetpack Compose collapsing toolbar

问题描述

我找不到关于此事的任何文档，是否有与Compose中的 CollapsingToolbar 类似的东西?

I can't find any doc on the matter, is there something similar to a CollapsingToolbar in Compose?

我发现的只是此处的提及，但没有关于如何设置

All I found was a mention of it here, but nothing on how to set it up

推荐答案

在Jetpack Compose中，我通过以下代码实现了折叠工具栏:

In the Jetpack Compose, I implemented collapsing toolbar by the following code:

@Composable
fun MainScreen(){
    val scrollState = rememberScrollState()
    // parallax effect by offset
    val imageOffset = (-scrollState.value * 0.18f).dp
    Box {
        Image(
            painter = painterResource(id = R.drawable.bg_header),
            contentDescription = null,
            contentScale = ContentScale.FillWidth,
            modifier = Modifier
                .graphicsLayer { translationY = imageOffset }
                .height(240.dp)
                .fillMaxWidth()
        )

        Column(
            Modifier
                .verticalScroll(scrollState)
                .padding(top = 200.dp)
                .background(
                    MaterialTheme.colors.surface,
                    RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
                )
                .fillMaxHeight()
                .fillMaxWidth()
                .padding(all = 16.dp)
        ) {
            // Main content here
        }
    }
}

您可以用LazyColumn替换Column和 val scrollState = RememberLazyListState()

You can replace Column with LazyColumn and val scrollState = rememberLazyListState()

这篇关于Jetpack Compose折叠工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！