android - 如何拥有一个带有可组合的 LazyColumn，如文本（“你在列表的顶部”），随着列表变大而消失？

Question

我有一个 Column 和一个 LazyColumn ，代码如下：

    Column {

        LazyColumn(
            modifier = Modifier.weight(1f),
            contentPadding = PaddingValues(top = 8.dp)
        ) {

            items(items = items) { it ->
                TodoRow(
                    todo = it,
                    onItemClicked = { onRemoveItem(it) },
                    modifier = Modifier.fillParentMaxWidth()
                )
            }
        }

    }

我想获得的是以下内容：

• 拥有一个带有 Text() 的 Box() 来说明我们处于“列表顶部”；
• 这个带有 Text() 的 Box() 无法修复。也就是说，随着列表变大并占据整个屏幕，它会逐渐消失。如果我们向上滚动 Text() 再次出现。

对于带有文本的框，我有以下代码：

Box(
    modifier = Modifier
          .fillMaxWidth()
          .padding(start = 8.dp, end = 8.dp)
          .background(color = Color.LightGray),
    contentAlignment = Alignment.Center
 )
 { Text("Top of the List", modifier = Modifier.padding(vertical = 8.dp)) }

如果我把这个 Box 作为上面 Column 的子对象放在 LazyColumn 之前，这个 Box 将被固定，我不希望这样。

那么，我应该把这个盒子放在哪里呢？你能帮助我吗？

谢谢

标签： androidkotlinandroid-jetpack-composeandroid-jetpack

Answer 1

您可以从列表状态读取滚动位置。根据位置，您可以计算“动画”的进度。

Column {
    val listState = rememberLazyListState()
    val topOfListProgress: Float by remember {
        derivedStateOf {
            listState.run {
                if (firstVisibleItemIndex > 0) {
                    0f
                } else {
                    layoutInfo.visibleItemsInfo
                        .firstOrNull()
                        ?.let {
                            1f - firstVisibleItemScrollOffset.toFloat() / it.size
                        } ?: 1f
                }
            }
        }
    }
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 8.dp, end = 8.dp)
            .background(color = Color.LightGray)
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)
                val offset = (placeable.height * (1f - topOfListProgress)).roundToInt()
                layout(placeable.width, placeable.height - offset) {
                    placeable.place(0, -offset)
                }
            }
            .alpha(topOfListProgress)
    ) {
        Text("Top of the List", modifier = Modifier.padding(vertical = 8.dp))
    }

    LazyColumn(
        state = listState,
        contentPadding = PaddingValues(top = 8.dp),
        modifier = Modifier
                .weight(1f)
    ) {
        items(100) {
            Text(it.toString())
        }
    }
}

结果：