如何在Jetpack Compose的LazyColumn中实现可随滚动渐隐的顶部提示

解决方案 #

你需要将自定义的提示Box放到LazyColumn的内容区块中，作为列表的第一个条目，即可实现跟随滚动的效果：

Column {
    LazyColumn(
        modifier = Modifier.weight(1f),
        contentPadding = PaddingValues(top = 8.dp)
    ) {
        // 新增首项item，放置顶部提示Box
        item { 
            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)) }
        }

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

原理解释 #

• 之前将Box放在外层Column、LazyColumn之前时，它属于固定布局的一部分，和LazyColumn平级，自然不会跟随列表滚动。
• 放在LazyColumn的item{}块中时，它就成为了可滚动列表的第一个条目，会跟随列表的滚动动作一起移动：向下滚动时逐步滑出屏幕，向上滚动回到列表顶部时重新显示，完全符合需求。

内容的提问来源于stack exchange，提问作者lbarqueira